Repository navigation
第 90 期(JavaScript-DOM)：获取DOM的样式 #93
Description
任何支持 style 特性的 HTML 元素在 JavaScript 中都有一个对应的 style 属性，对于使用短横线连接的 CSS 属性名，则需要将其转为驼峰大小写形式，才能通过 JavaScript 访问。
举例：
| CSS 属性 | JavaScript 属性 |
|---|---|
| background-color | style.backgroundColor |
| display | style.display |
| font-family | style.fontFamily |
注意：CSS 中的
float属性，在 JavaScript 中对应的属性名是cssFloat，IE 中则是styleFloat
获取 style 中的样式：
#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 方法。
语法：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)"
Activity