深入理解脚本化CSS系列第三篇——脚本化CSS类
![](data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAoklEQVQ4T+2T4Q2CMBCFv27CBjgCG+gIjAAbOAIjOIJs4Ai6gRvIBpjXXCOp19T/8pJLoTneXcj3Ah91wAV4bu68xwXoAZ2EzEAmE9AWTB6AelRDyaAx9zgh0wE4ATczcTdIE7wl0oe7wX/8RMHigfQTB3fDdM1IEvYyONdIVEOSqDwCY2Z2NaS/UNbqMSQmvauUPlfbNKpBSdTUVyXSs/XyBlRCNBG20I28AAAAAElFTkSuQmCC)
前面的话
在实际工作中,我们使用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类名的性能竟然提升这么多
少一点感性认识,多一些理性测试
欢迎交流
好的代码像粥一样,都是用时间熬出来的
![二维码](https://pic.xiaohuochai.site/blog/qrcode.jpg)
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
· SQL Server统计信息更新会被阻塞或引起会话阻塞吗?
· C# 深度学习框架 TorchSharp 原生训练模型和图像识别
· 这或许是全网最全的 DeepSeek 使用指南,95% 的人都不知道的使用技巧(建议收藏)
· 拒绝繁忙!免费使用 deepseek-r1:671B 参数满血模型
· 本地搭建DeepSeek和知识库 Dify做智能体Agent(推荐)
· Sdcb Chats 重磅更新:深度集成 DeepSeek-R1,思维链让 AI 更透明!
· DeepSeek-R1本地部署如何选择适合你的版本?看这里