深入了解腳本化CSS系列第一篇——腳本化行内樣式

前面的話

　　腳本化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>