深入理解脚本化CSS系列第三篇——脚本化CSS类-优快云博客

本文探讨了在前端开发中使用脚本化CSS类的方法及其性能优势，对比了直接修改样式和使用cssText的不同方式，并通过实验展示了改变CSS类名在性能上的显著提升。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前面的话

　　在实际工作中，我们使用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>