HTML 元素的 style 屬性
操作 CSS 樣式最簡單的方法桩了，就是使用網(wǎng)頁元素節(jié)點的getAttribute()方法附帽、setAttribute()方法和removeAttribute()方法，直接讀寫或刪除網(wǎng)頁元素的style屬性井誉。但style不僅可以使用字符串讀寫蕉扮，它本身還是一個對象，部署了 CSSStyleDeclaration 接口颗圣，可以直接讀寫個別屬性喳钟。
e.style.fontSize = '18px';
e.style.color = 'black';
CSSStyleDeclaration 接口
Style接口簡介
CSSStyleDeclaration 接口用來操作元素的樣式屁使。三個地方部署了這個接口。
- 元素節(jié)點的style屬性（Element.style）
- CSSStyle實例的style屬性
- window.getComputedStyle()的返回值
CSSStyleDeclaration 接口可以直接讀寫 CSS 的樣式屬性奔则，不過蛮寂，連詞號需要變成駱駝拼寫法日月。
var divStyle = document.querySelector('div').style;
divStyle.backgroundColor = 'red';
divStyle.border = '1px solid black';
divStyle.width = '100px';
divStyle.height = '100px';
divStyle.fontSize = '10em';
divStyle.backgroundColor // red
divStyle.border // 1px solid black
divStyle.height // 100px
divStyle.width // 100px
該對象的屬性值都是字符串焕蹄，設(shè)置時必須包括單位，但是不含規(guī)則結(jié)尾的分號左冬。比如抽莱，divStyle.width不能寫為100范抓，而要寫為100px。另外食铐，Element.style返回的只是行內(nèi)樣式匕垫，并不是該元素的全部樣式。通過樣式表設(shè)置的樣式璃岳，或者從父元素繼承的樣式年缎，無法通過這個屬性得到。元素的全部樣式要通過window.getComputedStyle()得到铃慷。
CSSStyleDeclaration 實例屬性
**CSSStyleDeclaration.cssText
var divStyle = document.querySelector('div').style;
divStyle.cssText = 'background-color: red;'
+ 'border: 1px solid black;'
+ 'height: 100px;'
+ 'width: 100px;';
ssText的屬性值不用改寫 CSS 屬性名单芜。
CSSStyleDeclaration.length
返回一個整數(shù)值，表示當(dāng)前規(guī)則包含多少條樣式聲明犁柜。
// HTML 代碼如下
// <div id="myDiv"
// style="height: 1px;width: 100%;background-color: #CA1;"
// ></div>
var myDiv = document.getElementById('myDiv');
var divStyle = myDiv.style;
divStyle.length // 3
CSSStyleDeclaration 實例方法
CSSStyleDeclaration.getPropertyPriority
方法接受 CSS 樣式的屬性名作為參數(shù)洲鸠，返回一個字符串，表示有沒有設(shè)置important優(yōu)先級馋缅。如果有就返回important扒腕，否則返回空字符串。
margin屬性有important優(yōu)先級萤悴，color屬性沒有瘾腰。
CSSStyleDeclaration.getPropertyValue()
接受 CSS 樣式屬性名作為參數(shù)，返回一個字符串覆履，表示該屬性的屬性值蹋盆。
// HTML 代碼為
// <div id="myDiv" style="margin: 10px!important; color: red;"/>
var style = document.getElementById('myDiv').style;
style.margin // "10px"
style.getPropertyValue("margin") // "10px"
CSSStyleDeclaration.item()
方法接受一個整數(shù)值作為參數(shù)，返回該位置的 CSS 屬性名硝全。
// HTML 代碼為
// <div id="myDiv" style="color: red; background-color: white;"/>
var style = document.getElementById('myDiv').style;
style.item(0) // "color"
style.item(1) // "background-color"
CSSStyleDeclaration.removeProperty()
CSSStyleDeclaration.removeProperty方法接受一個屬性名作為參數(shù)栖雾，在 CSS 規(guī)則里面移除這個屬性，返回這個屬性原來的值伟众。
// HTML 代碼為
// <div id="myDiv" style="color: red; background-color: white;">
// 111
// </div>
var style = document.getElementById('myDiv').style;
style.removeProperty('color') // 'red'
// HTML 代碼變?yōu)?// <div id="myDiv" style="background-color: white;">
CSSStyleDeclaration.setProperty()
CSSStyleDeclaration.setProperty方法用來設(shè)置新的 CSS 屬性析藕。該方法沒有返回值。
該方法可以接受三個參數(shù)凳厢。
第一個參數(shù)：屬性名账胧，該參數(shù)是必需的竞慢。
第二個參數(shù)：屬性值，該參數(shù)可選治泥。如果省略梗顺，則參數(shù)值默認為空字符串。
第三個參數(shù)：優(yōu)先級车摄，該參數(shù)可選。如果設(shè)置仑鸥，唯一的合法值是important吮播，表示 CSS 規(guī)則里面的!important。
// HTML 代碼為
// <div id="myDiv" style="color: red; background-color: white;">
// 111
// </div>
var style = document.getElementById('myDiv').style;
style.setProperty('border', '1px solid blue');
window.getComputedStyle()
行內(nèi)樣式（inline style）具有最高的優(yōu)先級眼俊，改變行內(nèi)樣式意狠，通常會立即反映出來。但是疮胖，網(wǎng)頁元素最終的樣式是綜合各種規(guī)則計算出來的环戈。因此，如果想得到元素實際的樣式澎灸，只讀取行內(nèi)樣式是不夠的院塞，需要得到瀏覽器最終計算出來的樣式規(guī)則。
window.getComputedStyle方法性昭，就用來返回瀏覽器計算后得到的最終規(guī)則拦止。它接受一個節(jié)點對象作為參數(shù)，返回一個 CSSStyleDeclaration 實例糜颠，包含了指定節(jié)點的最終樣式信息汹族。所謂“最終樣式信息”，指的是各種 CSS 規(guī)則疊加后的結(jié)果其兴。
var div = document.querySelector('div');
var styleObj = window.getComputedStyle(div);
styleObj.backgroundColor
getComputedStyle方法還可以接受第二個參數(shù)顶瞒，表示當(dāng)前元素的偽元素（比如:before、:after元旬、:first-line榴徐、:first-letter等）。
var result = window.getComputedStyle(div, ':before');
CSS偽元素
CSS 偽元素是通過 CSS 向 DOM 添加的元素法绵，主要是通過:before和:after選擇器生成箕速，然后用content屬性指定偽元素的內(nèi)容。節(jié)點元素的style對象無法讀寫偽元素的樣式朋譬，這時就要用到window.getComputedStyle()盐茎。JavaScript 獲取偽元素，可以使用下面的方法徙赢。
var test = document.querySelector('#test');
var result = window.getComputedStyle(test, ':before').content;
var color = window.getComputedStyle(test, ':before').color;
此外字柠，也可以使用 CSSStyleDeclaration 實例的getPropertyValue方法探越，獲取偽元素的屬性
var result = window.getComputedStyle(test, ':before')
.getPropertyValue('content');
var color = window.getComputedStyle(test, ':before')
.getPropertyValue('color');
StyleSheet 接口
StyleSheet接口代表網(wǎng)頁的一張樣式表，包括<link>元素加載的樣式表和<style>元素內(nèi)嵌的樣式表窑业。
document對象的styleSheets屬性钦幔，可以返回當(dāng)前頁面的所有StyleSheet實例（即所有樣式表）。它是一個類似數(shù)組的對象常柄。
var sheets = document.styleSheets;
var sheet = document.styleSheets[0];
sheet instanceof StyleSheet // true
如果是<style>元素嵌入的樣式表鲤氢，還有另一種獲取StyleSheet實例的方法，就是這個節(jié)點元素的sheet屬性西潘。
StyleSheet.disabled
StyleSheet.disabled返回一個布爾值卷玉，表示該樣式表是否處于禁用狀態(tài)。手動設(shè)置disabled屬性為true喷市，等同于在<link>元素里面相种，將這張樣式表設(shè)為alternate stylesheet，即該樣式表將不會生效品姓。
注意寝并，disabled屬性只能在 JavaScript 腳本中設(shè)置，不能在 HTML 語句中設(shè)置腹备。
Stylesheet.href
Stylesheet.href返回樣式表的網(wǎng)址衬潦。對于內(nèi)嵌樣式表，該屬性返回null馏谨。該屬性只讀别渔。
document.styleSheets[0].href
StyleSheet.title
StyleSheet.title屬性返回樣式表的title屬性。
StyleSheet.type
StyleSheet.type屬性返回樣式表的type屬性惧互，通常是text/css哎媚。
