前面的話

　　指令碼化CSS，通俗點說，就是使用javascript來操作CSS。引入CSS有3種方式：外部樣式，內部樣式和行間樣式。本文將主要介紹指令碼化行間樣式

基本用法

　　行間樣式又叫內聯樣式，使用HTML的style屬性進行設定

<div style="height: 40px;width: 40px;background-color: blue;"></div>

　　element元素節點提供style屬性，用來操作CSS行間樣式，style屬性指向cssStyleDeclaration物件

　　[注意]IE7-瀏覽器不支援cssStyleDeclaration物件

<div id="test" style="height: 40px;width: 40px;background-color: blue;"></div>
<script>
//IE7-瀏覽器返回報錯，其他瀏覽器返回true
console.log(test.style instanceof CSSStyleDeclaration);
</script>

　　style屬性用來讀寫頁面元素的行內CSS樣式

　　如果讀取沒有設定過的行間樣式將返回空字串''

　　如果設定的行間樣式不符合預定格式，並不會報錯，而是靜默失敗

　　[注意]IE8-瀏覽器支援給屬性設定值時不帶單位

<div id="test" style="height: 40px;width: 40px;background-color: blue;"></div>
<script>
console.log(test.style.height);//'40px'
test.style.height = '30px';
console.log(test.style.height);//'30px'

test.style.height = '20';
//IE8-瀏覽器返回'20px'，因為IE8-瀏覽器支援給屬性設定值時不帶單位；而其他瀏覽器仍然返回'30px'
console.log(test.style.height);

console.log(test.style.position);
 
//''
</script>

　　如果一個CSS屬性名包含一個或多個連字元，CSSStyleDeclaration屬性名的格式應該是移除連字元，將每個連字元後面緊接著的字母大寫

<div id="test" style="height: 40px;width: 40px;background-color: blue;"></div>
<script>
console.log(test.style.backgroundColor);//'blue'
</script>

float

　　理論上，有一個不能直接轉換的CSS屬性是float。因為，float是javascript中的保留字，不能用作屬性名　

　　但實際上，經過測試，直接使用float在各個瀏覽器中都有效

<div id="test" style="float:left"></div>
<script>
console.log(test.style.float);//'left'
</script>

　　作為推薦，要訪問float屬性，應該使用cssFloat

　　[注意]IE8-瀏覽器不支援cssFloat，但IE瀏覽器支援styleFloat

<div id="test" style="float:left"></div>
<script>
//IE8-瀏覽器返回undefined，其他瀏覽器返回'left'
console.log(test.style.cssFloat);//'left'
//IE瀏覽器返回'left'，其他瀏覽器返回undefined
console.log(test.style.styleFloat);
</script>

特性操作

　　其實，如果操作行間樣式，可以使用元素節點的特性操作方法hasAttribute()、getAttribute()、setAttribute()、removeAttribute()等，來操作style屬性

<div id="test" style="height: 40px;width: 40px;"></div>
<script>
console.log(test.hasAttribute('style'));//true
console.log(test.getAttribute('style'));//'height: 40px;width: 40px;'

test.setAttribute('style','height:10px;');
console.log(test.getAttribute('style'));//'height:10px;'

test.removeAttribute('style');
console.log(test.hasAttribute('style'));//false
console.log(test.getAttribute('style'));//null
</script>

屬性

cssText

　　通過cssText屬效能夠訪問到style特性中的CSS程式碼。在讀模式下，cssText返回瀏覽器對style特性中CSS程式碼的內部表示；在寫模式中，賦給cssText的值會重寫整個style特性的值

　　設定cssText是為元素應用多項變化最快捷的方法，因為可以一次性應用所有變化

　　[注意]IE8-瀏覽器返回的屬性名是全大寫的

<div id="test" style="height: 40px;width: 40px;"></div>
<script>
//IE8-瀏覽器返回'HEIGHT: 40px; WIDTH: 40px;'，其他瀏覽器返回'height: 40px; width: 40px;'
console.log(test.style.cssText);
test.style.cssText= 'height:20px';
//IE8-瀏覽器返回'HEIGHT: 20px;'，其他瀏覽器返回'height: 20px;'
console.log(test.style.cssText);
</script>

length

　　length屬性返回內聯樣式中的樣式個數

　　[注意]IE8-瀏覽器不支援

<div id="test" style="height: 40px;width: 40px;"></div>
<script>
console.log(test.style.length);//2
</script>

parentRule

　　parentRule屬性表示CSS資訊的CSSRule物件

　　[注意]IE8-瀏覽器不支援

<div id="test" style="height: 40px;width: 40px;"></div>
<script>
//IE8-瀏覽器返回undefined，其他瀏覽器返回null
console.log(test.style.parentRule);
</script>

方法

item()

　　item()方法返回給定位置的CSS屬性的名稱，也可以使用方括號語法

　　[注意]IE8-瀏覽器不支援item()方法，只支援方括號語法

<div id="test" style="height: 40px;width: 40px;background-color: pink;"></div>
<script>
//IE9+瀏覽器返回'width'，IE8-瀏覽器報錯，其他瀏覽器返回'height'
console.log(test.style.item(0));
//IE9+瀏覽器返回'width'，IE8-瀏覽器返回'WIDTH'，其他瀏覽器返回'height'
console.log(test.style[0])
</script>

　　由上面程式碼可知，IE瀏覽器返回值與其他瀏覽器有差異

getPropertyValue()

　　getPropertyValue()方法返回給定屬性的字串值

　　[注意]IE8-瀏覽器不支援

<div id="test" style="height: 40px;width: 40px;background-color: pink;"></div>
<script>
//IE8-瀏覽器報錯，其他瀏覽器返回'pink'
console.log(test.style.getPropertyValue('background-color'));
console.log(test.style.backgroundColor);//'pink'
console.log(test.style['background-color']);//'pink'
console.log(test.style['backgroundColor']);//'pink'
</script>

getPropertyCSSValue()

　　getPropertyCSSValue()方法返回包含兩個屬性的CSSRule型別，這兩個屬性分別是cssText和cssValueType。其中cssText屬性的值與getPropertyValue()返回的值相同，而cssValueType屬性則是一個數值常量，表示值的型別：0表示繼承的值，1表示基本的值，2表示值列表，3表示自定義的值

　　[注意]該方法只有safari支援

<div id="test" style="height: 40px;width: 40px;background-color: pink;"></div>
<script>
//cssText:"rgb(255, 192, 203)" cssValueType: 1 primitiveType: 25
console.log(test.style.getPropertyCSSValue('background-color'));
console.log(test.style.getPropertyCSSValue('background'));//null
</script>

getPropertyPriority()

　　如果給定的屬性使用了!important設定，則返回"important"；否則返回空字串

　　[注意]IE8-瀏覽器不支援

<div id="test" style="height: 40px!important;width: 40px;background-color: pink;"></div>
<script>
console.log(test.style.getPropertyPriority('height'));//'important'
console.log(test.style.getPropertyPriority('width'));//''
</script>

setProperty()

　　setProperty(propertyName,value,priority)方法將給定屬性設定為相應的值，並加上優先順序標誌("important"或一個空字串)，該方法無返回值

　　[注意]IE8-瀏覽器不支援

<div id="test" style="height: 40px;width: 40px;background-color: pink;"></div>
<script>
console.log(test.style.height);//'40px'
test.style.setProperty('height','20px','important');
console.log(test.style.height);//'20px'
test.style.setProperty('height','30px');
//safari瀏覽器返回'20px'，設定過!important後，再設定非important的屬性值則無效
//其他瀏覽器返回'30px'
console.log(test.style.height);
</script>

removeProperty()

　　removeProperty()方法從樣式中刪除給定屬性，並返回被刪除屬性的屬性值

　　[注意]IE8-瀏覽器不支援

<div id="test" style="height: 40px;width: 40px;background-color: pink;"></div>
<script>
console.log(test.style.height);//'40px'
console.log(test.style.removeProperty('height'));//'40px'
console.log(test.style.height);//''

console.log(test.style.width);//'40px'
test.style.width = '';
console.log(test.style.width);//''
</script>

模組偵測

　　CSS的規格發展太快，新的模組層出不窮。不同瀏覽器的不同版本，對CSS模組的支援情況都不一樣。有時候，需要知道當前瀏覽器是否支援某個模組，這就叫做“CSS模組的偵測”

　　一個比較普遍適用的方法是，判斷某個DOM元素的style物件的某個屬性值是否為字串。如果該CSS屬性確實存在，會返回一個字串。即使該屬性實際上並未設定，也會返回一個空字串。如果該屬性不存在，則會返回undefined

<div id="test"></div>
<script>
//IE9-瀏覽器和safari返回undefined，其他瀏覽器都返回''，所以IE9-瀏覽器和safari不支援animation
console.log(test.style.animation)    
//IE和firefox瀏覽器返回undefined，chrome和safari瀏覽器都返回''，所以IE和firefox瀏覽器不支援WebkitAnimation
console.log(test.style.WebkitAnimation)
</script>

CSS.supports()

　　CSS.supports()方法返回一個布林值，表示是否支援某條CSS規則

　　[注意]safari和IE瀏覽器不支援

<script>
//chrome和firefox瀏覽器返回true，其他瀏覽器報錯
console.log(CSS.supports('transition','1s'));
</script>