cssText

cssText 本质是什么？

cssText 的本质就是设置 HTML 元素的 style 属性值。

cssText 怎么用？

document.getElementById("d1").style.cssText = "color:red; font-size:13px;";

 

cssText 返回值是什么？

在某些浏览器中（比如 Chrome），你给他赋什么值，它就返回什么值。在 IE 中则比较痛苦，它会格式化输出、会把属性大写、会改变属性顺序、会去掉最后一个分号，比如：

document.getElementById("d1").style.cssText = "color:red; font-size:13px;";
alert(document.getElementById("d1").style.cssText);

在 IE 中值为：FONT-SIZE: 13px; COLOR: red

<div id="d1" style="color:green; background:yellow;">cssText</div>

<script type="text/javascript">
document.getElementById("d1").style.cssText = "color:red;";
document.getElementById("d1").style.cssText = "font-size:13px;";
alert(document.getElementById("d1").style.cssText);
</script>

　　如上代码，最终的效果是什么？color、background、font-size 三个属性的组合？还是只有 font-size？

　　　　是只有 font-size，可见 cssText 不是把其中的 CSS 属性拆开重新组合，而是覆盖前面的 HTML 的 style 属性和 JavaScript 中 cssText。

　　再进一步，如果前面有样式表文件写着 div { text-decoration:underline; }，这个会被覆盖吗？

　　　　不会！因为它不是直接作用于 HTML 元素的 style 属性。

cssText 的方便之处在于一次可以写很多属性，而且变更 CSS 样式不必变 JS 代码，只需变样式字符串。但它有个缺点，就是它会覆盖掉前面的属性。