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>中定义的样式。

。。。。。。。。。