cssText属性

最新推荐文章于 2023-09-19 08:06:51 发布

乙只

最新推荐文章于 2023-09-19 08:06:51 发布

阅读量3.8k

点赞数 2

分类专栏： JS

本文链接：https://blog.csdn.net/qq_40664253/article/details/97316912

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本质：
就是HTML元素的style属性值
优势：
将多次改变样式属性的操作合并为一次操作（适用于单个存在的节点），减少页面重排reflow。

语法：obj.style.cssText="样式"

例如：

//javascript
var el = document.querySelector(’.el’);
el.style.borderLeft = ‘1px’;
el.style.borderRight = ‘2px’;
el.style.padding = ‘5px’;

可以使用内联样式的cssText方法实现：

var el = document.querySelector(’.el’);
el.style.cssText = ‘border-left: 1px; border-right: 2px; padding: 5px;’;

问题：
使用cssText时会把会把原有的cssText清掉，比如原来的style中有’display:none;’，那么执行完上面的JS后，display就被删掉了。

<body>
<h1 style="color:red;font-size:50px;text-align:center;">cssText属性</h1>
<button onclick="btnclick()">点击，内联样式全被覆盖</button>
<p id="demo"></p>
<script>
    function btnclick(){
        var h1=document.getElementsByTagName("h1")[0];
        h1.style.cssText="color:blue";
    }
</script>
</body>

为了解决这个问题，可以采用cssText累加的方法：

h1.style.cssText + =" ; color:blue";

注意：一定要在前面加一个；，否则这个累加的方法在IE中是无效的。
返回值：
在某些浏览器（Chrome）中，你给它赋什么值，它返回什么值。但在IE中它会格式化输出、会把属性大写、会改变属性顺序、会去掉最后一个分号。
例如:

<body>
<h1 style="color:red;font-size:50px;">cssText属性</h1>
<button onclick="btnclick()">点击返回元素行内样式</button>
<p id="demo"></p>
<script>
    function btnclick(){
        var h1=document.getElementsByTagName("h1")[0];
        var x=h1.style.cssText;
        alert(x);
    }
</script>
</body>

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