关于对DOM样式属性和方法的记录

（一）综合属性的有很多

例如：

• background
• border

<div id="div" ></div>

for(var i=0;i<oDiv.style.length;i++){

     console.log(oDiv.style[i]);

}
/*===以下是chrome的输出结果===*/

比我想象中输出的多，ie下没办法用这种方式访问，其余浏览器输出的也都不一致。虽然是综合属性，但是在用getPropertyValue方法时只返回内联里写入的值（除了火狐），只要清楚他返回的值在浏览器中存在差异就行了。

要从内联样式中移除用removeProperty方法，被移除的属性将恢复为默认样式（取决于用户代理）。这两个方法受到高版本的浏览器的支持。

（二）好玩的综合属性

在测试样式的过程中发现一件有趣的事。

例①：div的内联样式为background：red；

     js：

          oDiv.style.background='blue';     //执行时间：0.105ms左右
                         ↓替换成

          oDiv.style.backgroundColor='blue';      //执行时间：0.083ms左右

例①的代码已经很明显的说明综合属性在设置时的区别

 

例②：div的内联样式为background：0 0 no-repeat #77cc00；

     js：

          oDiv.style.background='blue';     //执行时间：0.149ms左右
                         ↓替换成

          oDiv.style.backgroundColor='blue';      //执行时间：0.203ms左右

例②说明在把综合的background替换成backgroundColor会在background：0 0 no-repeat #77cc00里搜索到他的颜色值加以替换，这样会比较费劲。为什么是搜索后替换background的颜色值而不是把background整个代替掉呢？

例③：<div id="div" ></div>

          oDiv.style.backgroundColor='blue';
          alert(oDiv.style.backgroundPosition);     //10px 10px