JS 操作樣式 style

1、

任何支持 style 特性的 HTML 元素在 JavaScript 中都對應着有一個 style 屬性，指向一個 CSSStyleDeclaration 的一個實例對象，包含該元素的內嵌style樣式（直接定義在HTML元素上的style）。

對於使用短線分割的CSS屬性，在JavaScript中轉為駝峰式。

幾個常見的屬性：

CSS屬性	JavaScript屬性
background-image	style.backgroundImage
color	style.color
display	style.display
font-family	style.fontFamily
height	style.height
width	style.width

 

有一個CSS屬性--->float，不能直接轉換為JavaScript的屬性，因為 float 在Javascript中是保留字。在 IE9+，Firefox、Safari、Opera、Chrome 中是 cssFloat，在同時所有IE也支持 styleFloat 。

var testDiv = document.getElementById("test");
testDiv.style.backgroundColor = "red";  //所有瀏覽器都支持屬性賦值
//testDiv.style.cssFloat = "right"; // IE9+，Firefox、Safari、Opera、Chrome
testDiv.style.styleFloat = "right"; // IE 所有
testDiv.style.border = "1px solid red";
console.log(testDiv.style.backgroundColor); // red

以上改變樣式，會直接自動更新元素的表現。在標准模式下所有度量值都必須指定一個度量單位，如果沒有設置會被忽略。

2、“DOM2級樣式”中為 style 對象新添加的屬性和方法

cssText	返回或設置style的CSS代碼	testDiv.style.cssText = "width:25px; height: 100px;background-color:green"; console.log(testDiv.style.cssText);
length	CSS屬性的數量	console.log(testDiv.style.length);
parentRule	返回表示CSS信息的CSSRule對象
getPropertyCSSValue(propertyName)	返回包含給定屬性名的CSSValue對象	返回的對象包含連個屬性：cssText -->該屬性的的字符串值； cssValueType -->css類型，數字常量，0（繼承的值）、1（基本的值）、2（值列表）、3（自定義的值）
getPropertyValue(propertyName)	返回給定屬性的字符串值	testDiv.style.getPropertyValue("background-color");
getPropertyPriority(propertyName)	如果給定的屬性使用了“!important"，返回important，否則返回空字符串
item(index)/方括號語法[index]	返回給定索引的CSS屬性名稱	testDiv.style.item(1); testDiv.style[1];
removeProperty(propertyName)	刪除給定的屬性
setProperty(propertyaName,value,priority)	設置屬性，及優先級（“important”或空字符串）

var testDiv = document.getElementById("test");
testDiv.style.backgroundColor = "red";  
for(var i=0, len=testDiv.style.length;i<len;i++){  // IE 9+、Safari、Chrome、Firefox、Opera 9+
    var prop = testDiv.style[i];
    var value = testDiv.style.getPropertyValue(prop);
    console.log(prop + ": " + value);
}
testDiv.style.cssText = "width:25px; height: 100px;background-color:green";
console.log(testDiv.style.cssText);

瀏覽器支持：IE9+、Firefox、Safari、Opera 9+、Chrome

3、計算的樣式，document.defaultView.getComputedStyle()

 計算樣式都是只讀的，也包含瀏覽器默認CSS值，而有些屬性各個瀏覽器默認值也不同。

 getComputedStyle(element,pseudo-element)，element是要計算樣式的元素，pseudo-element是偽元素（":after"、“:before”），沒有偽元素也可以是null。返回的是一個CSSStyleDeclaration對象

<style>
    #mydiv{
        background-color: blue;
        width: 100px;
        height:200px;
    }

</style>


<div id="mydiv" style="background-color: red; border: 1px solid black"></div>


var mydiv = document.getElementById("mydiv");

var computedStyle = document.defaultView ? document.defaultView.getComputedStyle(mydiv,null) : mydiv.currentStyle;  // IE8- 不支持document.defaultView，所有IE都支持currentStyle

console.log(computedStyle.backgroundColor); // rgb(255, 0, 0) ,IE: red
console.log(computedStyle.width); // 100px
console.log(computedStyle.height); // 200px
console.log(computedStyle.border);  //1px solid rgb(0, 0, 0)  ， IE9+：空字符串，IE8-：undefined
console.log(computedStyle.borderLeftWidth);  // 1px

顏色的返回值在各個瀏覽器也不同，有的會轉化RGB格式。

 border是一個綜合屬性，它包含四個邊的邊框寬度、顏色、類型等，各個瀏覽器解析不一樣。所以 computedStyle.border 有的返回有的為空。

 4、操作樣式表

 DOM2提供了操作樣式表的接口，可以操作通過<link>包含的樣式表和在<style>中定義的樣式。

。。。。。。。。。