樣式操作

• 樣式操作
  • CSS 對(duì)應(yīng) DOM 對(duì)象
    • 內(nèi)部樣式表
    • 行內(nèi)樣式
  • 更新樣式
    • element.style
    • element.style.cssText
    • 更新 class
    • 統(tǒng)一更新多個(gè)元素樣式
  • 獲取樣式
    • element.style
    • window.getComputedStyle()

樣式操作

通過(guò) JavaScript 動(dòng)態(tài)修改頁(yè)面樣式。

CSS 對(duì)應(yīng) DOM 對(duì)象

<link rel="stylesheet" type="text/css" href="sample.css">
// var element = document.querySelector('link');
// 對(duì)應(yīng)于 element.sheet

<style type="text/css" media="screen">
  body {
    margin: 30px
  }
</style>
// var element = document.querySelector('style');
// 對(duì)應(yīng)于 element.sheet

// 整個(gè)頁(yè)面的全部樣式（不包括行內(nèi)樣式）
document.styleSheets

<p style="color:red">Text Color</p>
// var element = document.querySelector('p');
// 對(duì)應(yīng)于 element.style

內(nèi)部樣式表

<style>
  body{margin:30;}
  p{color: #aaa; line-height:20px}
</style>

// 1.對(duì)應(yīng)所有樣式的列表
// body{margin:30;}
// p{color: #aaa; line-height:20px}
element.sheet.cssRules;

// 2.對(duì)應(yīng)相應(yīng)的 CSS 選擇器
// p
element.sheet.cssRules[1].selectorText;

// 3.對(duì)應(yīng)一個(gè)樣式
// p{color: #aaa; line-height:20px}
element.sheet.cssRules[1]

// 4.對(duì)應(yīng)所有樣式的鍵值對(duì)
// color: #aaa; line-height:20px
element.sheet.cssRules[1].style;

// 5.對(duì)應(yīng)的屬性值
// #aaa
element.sheet.cssRules[1].stlye.color;
element.sheet.cssRules[1].lineHeight;

行內(nèi)樣式

其對(duì)應(yīng)于 CSSStyleDeclaration 的對(duì)象。

element.style.color;
// 獲取行內(nèi)樣式的鍵值對(duì)

更新樣式

element.style

element.style.color = 'red';
element.style.background = 'black';

增加樣式后得到的結(jié)果

<div style="color: red; background: black;"></div>

缺點(diǎn)

• 每個(gè)屬性的更新都需要一個(gè)命令
• 命名異常（以駝峰命名法命名屬性）

element.style.cssText

一次同時(shí)設(shè)置多個(gè)行內(nèi)樣式，其結(jié)果同 element.style 單獨(dú)設(shè)置相同。

element.style.cssText = 'color: red; background: black';

增加樣式后得到的結(jié)果

<div style="color: red; background: black;"></div>

以上兩種方式均將樣式混合在邏輯當(dāng)中。

更新 class

首先需要?jiǎng)?chuàng)建對(duì)應(yīng)樣式的 CSS 樣式。

.angry {
  color: red;
  background: black;
}

然后再在 JavaScript 中，在對(duì)應(yīng)的事件中給元素添加需要的類(lèi)即可。

element.className += ' angry';

增加樣式后得到的結(jié)果

<div class="angry"></div>

統(tǒng)一更新多個(gè)元素樣式

以上方法均不適合同時(shí)更新多個(gè)樣式，通過(guò)更換樣式表的方式則可同時(shí)更改多個(gè)頁(yè)面中的樣式。將需要的大量樣式也在一個(gè)皮膚樣式表中，通過(guò) JavaScript 來(lái)直接更換樣式表來(lái)進(jìn)行樣式改變。（此方法也可用于批量刪除樣式）

<link rel="stylesheet" type="text/css" href="base.css">
<link rel="stylesheet" type="text/css" href="style1.css">

element.setAttribute('href', 'style2.css');

獲取樣式

element.style

其對(duì)應(yīng)的為元素的行內(nèi)樣式表而不是實(shí)際樣式表。

<input type="checkbox" name="" value="">

element.style.color; // ""

line-height: 200px

window.getComputedStyle()

將需要取出樣式的目標(biāo)元素傳入 window.getComputedStyle() 函數(shù)中，即可得到對(duì)應(yīng)元素的實(shí)際樣式。注意的是這里獲取到的樣式值為只讀屬性不可修改！

NOTE：獲取的實(shí)際為 CSSStyleDeclaration 的實(shí)例對(duì)象。 NOTE+：此方法不支持 IE9 以下版本，IE9 中需使用 element.currentStyle 來(lái)做兼容。

var style = window.getComputedStyle(element[, pseudoEle]);

<input type="checkbox" name="" value="">

window.getComputedStyle(element).color; // 'rgb(0,0,0)'