js控制样式一个细节

[设置样式]

JavaScript设置一个HTMLElement的style属性时，影响的是该元素的内联样式，影响单个元素。

如 对于HTML： <p id="sel"> <span>设置样式</span> </p> ----------（代码 1）

        var ele = document.getElementById("sel");
        ele.style.color = "#ccc" ;

达到的效果等价于

  <p id="sel" style="color:#ccc"> <span>设置样式</span> </p>

 

[获取样式]

从HTMLElement的style属性获取一个CSS2Properties对象时，这个对象的属性表示该元素的内联样式。

如上的代码（1）改为：

<style>
 #sel{color:red}
</style>
<p id="sel"> <span>设置样式</span> </p>     ----------（代码 2）

那么，通过style属性无法获取id=“sel” 的P标签的样式

        var ele = document.getElementById("sel");
        alert(ele.style.color); //alert出空字符串

所以，通过CSS2Properties对象的属性来获取元素样式提前有2个：

（1）该元素的HTML标签有style属性设置了对应的内联样式

（2）该属性在获取之前在其它地方有通过JS动态设置过。

 

[总结]

CSS2Properties对象没有提供查询和设置CSS层叠的方法，只能设置和获取内联样式。