Open wingmeng opened 5 years ago
任何支持 style 特性的 HTML 元素在 JavaScript 中都有一个对应的 style 属性,对于使用短横线连接的 CSS 属性名,则需要将其转为驼峰大小写形式,才能通过 JavaScript 访问。
注意:CSS 中的 float 属性,在 JavaScript 中对应的属性名是 cssFloat,IE 中则是 styleFloat
float
cssFloat
styleFloat
#myDiv { color: #000 !important; border: 1px solid blue; }
<div id="myDiv" style="font-size:20px; color:red"></div>
var myDiv = document.getElementById('myDiv'); myDiv.style.fontSize; // "20px" myDiv.style.color; // "red" myDiv.style.border; // "" myDiv.style.cssText; // "font-size: 20px; color: red;"
虽然 style 对象能提供支持 style 特性的任何元素的样式信息,但它不包含那些从其他样式表层叠而来并影响到当前元素的样式信息。要获取这类计算后的样式,需要用到 getComputedStyle 方法。
getComputedStyle
语法:window.getComputedStyle(element [, pseudoElt ])
var computedStyle = window.getComputedStyle(myDiv); console.log(computedStyle.color); // "rgb(0, 0, 0)" console.log(computedStyle.fontSize); // "20px" console.log(computedStyle.border); // "1px solid rgb(0, 0, 255)"
任何支持 style 特性的 HTML 元素在 JavaScript 中都有一个对应的 style 属性,对于使用短横线连接的 CSS 属性名,则需要将其转为驼峰大小写形式,才能通过 JavaScript 访问。
举例:
获取 style 中的样式:
获取计算的样式:
虽然 style 对象能提供支持 style 特性的任何元素的样式信息,但它不包含那些从其他样式表层叠而来并影响到当前元素的样式信息。要获取这类计算后的样式,需要用到
getComputedStyle
方法。