首页 > 代码库 > cssText

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 代码,只需变样式字符串。但它有个缺点,就是它会覆盖掉前面的属性。

 

cssText