星空网 > 软件开发 > Java

深入理解脚本化CSS系列第三篇——脚本化CSS类

前面的话

  在实际工作中,我们使用javascript操作CSS样式时,如果要改变大量样式,会使用脚本化CSS类的技术,本文将详细介绍脚本化CSS类

 

style

  我们在改变元素的少部分样式时,一般会直接改变其行间样式

<div id="test" style="height:100px;width:100px;background-color:blue;"></div><script>test.onclick = function(){  test.style.backgroundColor = 'green';}</script>

cssText

  改变元素的较多样式时,可以使用cssText

<div id="test" style="height:100px;width:100px;background-color:blue;"></div><script>test.onclick = function(){  test.style.cssText = 'height:50px;width:50px;background-color:green';}</script>

css类

  更常用的是使用css类,将更改前和更改后的样式提前设置为类名。只要更改其类名即可

<style>.big{  height:100px;  width:100px;  background-color:blue;}.small{  height:50px;  width:50px;  background-color:green;}  </style><div id="test" class="big"></div><script>test.onclick = function(){  test.className = 'small';}</script>

classList

  如果要改变多个类名,使用classList更为方便

  [注意]IE9-浏览器不支持

<style>.big{  height:100px;  width:100px;}.small{  height:50px;  width:50px;}  .green{  background-color:green;}.blue{  background-color:blue;}</style><div id="test" class="big green"></div><button id="btn1">大小变化</button><button id="btn2">颜色变化</button><script>btn1.onclick = function(){  test.classList.toggle('small');}btn2.onclick = function(){  test.classList.toggle('blue');}</script>

性能

<div id="test" style="height:100px;width:100px;background-color:blue;"></div><script>test.onclick = function(){  console.time();  for(var i = 0; i < 10000; i++){    test.style.backgroundColor = 'green';    test.style.height = '50px';      test.style.width = '50px';      }  console.timeEnd();//59.937ms}</script>/*****************************/<div id="test" style="height:100px;width:100px;background-color:blue;"></div><script>test.onclick = function(){  console.time();  for(var i = 0; i < 10000; i++){  test.style.cssText = 'height:50px;width:50px;background-color:green';  }  console.timeEnd();//38.065ms}</script>/*****************************/<style>.big{  height:100px;  width:100px;  background-color:blue;}.small{  height:50px;  width:50px;  background-color:green;}  </style><div id="test" class="big"></div><script>test.onclick = function(){  console.time();  for(var i = 0; i < 10000; i++){  test.className = 'small';  }  console.timeEnd();//9.534ms}</script>

  在1万次循环中,改变style属性中的具体样式花费了59.937ms,改变style属性中的cssText花费了38.065ms,而改变css类名只花费了9.534ms

  由此可见,使用脚本化CSS类的方式可以大大地提高性能

 

最后

  脚本化CSS的场景非常常见,一直提倡使用脚本化CSS类的方式来操作CSS,以为只是为了方便。感觉脚本化CSS类应该和使用cssText的性能差不多,但没想到最终结果竟然不是同一个数量级的,改变CSS类名的性能竟然提升这么多

  少一点感性认识,多一些理性测试

  欢迎交流




原标题:深入理解脚本化CSS系列第三篇——脚本化CSS类

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

每日新闻 20201220|先买后付的消费方式将重新振兴中东经济:https://www.ikjzd.com/articles/137742
eBay发布11月英国封锁期间的卖家保护措施:https://www.ikjzd.com/articles/137744
亚马逊突然延迟发货,赶紧做好自查:https://www.ikjzd.com/articles/137745
第三条新改变!亚马逊,开始大规模清零冻结资金:https://www.ikjzd.com/articles/137746
Shopify选品浅谈:https://www.ikjzd.com/articles/137747
Shopee转运仓及揽货服务圣诞节和元旦放假通知:https://www.ikjzd.com/articles/137748
37号文今后是否会更新?一文详解关键信息 :https://www.kjdsnews.com/a/1836441.html
探讨内地人开设香港账户的可行性 :https://www.kjdsnews.com/a/1836442.html
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流