cssText

最新推荐文章于 2022-10-24 19:44:41 发布

好事总会发生在下个转弯

最新推荐文章于 2022-10-24 19:44:41 发布

阅读量107

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/drawlessonsfrom/article/details/114274753

版权

73 篇文章 1 订阅

订阅专栏

1、通过JS来覆写对象的样式是比较典型的一种销毁原样式并重建的过程，这种销毁和重建都会增加浏览器的开销。采用style属性设置元素多条样式时，样式一多，代码就很多，导致代码冗余且会导致页面重新渲染，一般情况下用JS设置元素对象的样式会使用以下形式：

var element=document.getElementById("id");
element.style.width="20px";
element.style.height="20px";
element.style.border="solid 1px red";

2、采用cssText设置HTML元素的style属性可减少代码冗余，尽量避免页面重新渲染，提高页面性能。语法为obj.style.cssText=“样式”，例如：

element.style.cssText="width:20px;height:20px;border:solid 1px red;";
element.style.cssText="color:red;font-size:13px;";

3、但是，这样会有一个问题：会把原有的cssText清掉，比如原来的style中有"display:none"，那么执行完上面的JS后，display就被删除掉了。为了解决这个问题，可以采用cssText累加的方法：

element.style.cssText+=";width:100px;height:100px;";

关注