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层叠的方法，只能设置和获取内联样式。