欢迎您访问 最编程 本站为您分享编程语言代码，编程技术文章！

热门搜索/Hot Search

您现在的位置是： 首页

cssText

最编程 2024-08-10 12:12:16
...
cssText是什么？

说白了，就是style的一个属性。
开发中js设置元素样式的时候，我们经常会这么写ele.style.name=value（后面此种写法只代表js设置单一样式时候的写法），同理，设置cssText的属性值也是这么写ele.style.cssText=value;

cssText是干啥的

cssText代表的是样式字符串，跟ele.style.name=value功能一样，都是用来设置元素样式。
但是，是设置的行内的，还是内联的亦或是外联的呢？？在这里证明一下。

//demo.css中.box的width样式设置为100px
<link rel="stylesheet" type="text/css" href="demo.css"/>

//style
<style>
  .box{
      width:200px;
}
</style>
//html
<html>
    <div class='box' id='box' style='width:300px;height:100px;border:1px solid red;'>
</html>
//script
<script>
    let box = document.getElementById('box');
    console.log(box.style.width)//300px
    console.log(box.style.cssText)//width: 300px; height: 100px; border: 1px solid red;
</script>

如结果所示，无论是box.style.width或者是box.style.cssText，打印出的都是元素的行内样式，只不过box.style.width打印出的是单一样式属性值，而box.style.cssText打印出的则是多个样式属性和值的字符串。

ele.style.cssText与ele.style.name的区别

1 设置元素样式时，写法上的区别

功能是一样的，只不过ele.style.cssText可以同时设置多个样式属性，而ele.style.name=value只能同时设置一个样式属性。这就注定了在设置元素样式时，写法就有区别。
用ele.style.name=value时的写法：

ele.style.width=”10px”;
ele.style.height=”10px”;
ele.style.border=”1px solid red”;

用ele.style.cssText=value时的写法：

ele.style.cssText=”width:10px;height:10px;border:1px solid red”;

是不是精简了很多？

2 一定程度上，性能有优势

为什么说在一定程度上呢？因为js解析引擎在解析两种语句上，在设置样式不多的时候，性能几乎没什么差别，即使到了设置10多个样式的时候，性能差别也可以忽略不计。但是在具体到业务上来说，同效果配合，不断变换样式属性达到效果目的，这时候，就会体现出来cssText的优势了。亲测在高端手机上没有多大差别，在稍微低端点的手机上，ele.style.cssText=value流畅度优于ele.style.name=value。
如上写法上的区别，一种是多行单一设置，一种是单行多种设置。如果需要设置的样式属性有很多，那么代码自然就会很多，而且用js来覆写对象的样式是比较典型的一种销毁原样式并重建的过程，这种销毁和重建，都会增加浏览器的开销，在一定程度上回消耗浏览器性能。

3 权重高

同时设置box.width

WechatIMG1375.jpeg

会发现，盒子展现的是cssText的值，尽管我们已经把stye.width写在后面，却依然是cssText的样式。如下图：
WechatIMG1376.jpeg

不过，在设置cssText值的时候，会有一个问题，每次设置的cssText的值，都会把原来的cssText的值销毁重新赋值，也就是把原来的清除掉。所以可以用累加的形式，ele.style.cssText+=';width:300px;height:200px;border:1px solid red;'避免之前样式串被覆盖掉。

上一篇： 使用JavaScript修改CSS样式的方法：style.cssText

下一篇： JavaScript大全：让你轻松掌握显示和隐藏div的技巧

推荐阅读