[1]style
[2]cssText
[3]css类
[4]classList
[5]性能
前面的话
在实际工作中,我们使用javascript操作CSS样式时,如果要改变大量样式,会使用脚本化CSS类的技术,本文将详细介绍脚本化CSS类
style
我们在改变元素的少部分样式时,一般会直接改变其行间样式
test.onclick = function(){
test.style.backgroundColor = 'green';
}
cssText
改变元素的较多样式时,可以使用cssText
test.onclick = function(){
test.style.cssText = 'height:50px;width:50px;background-color:green';
}
css类
更常用的是使用css类,将更改前和更改后的样式提前设置为类名。只要更改其类名即可
.big{
height:100px;
width:100px;
background-color:blue;
}
.small{
height:50px;
width:50px;
background-color:green;
}
test.onclick = function(){
test.className = 'small';
}
classList
如果要改变多个类名,使用classList更为方便
[注意]IE9-浏览器不支持
.big{
height:100px;
width:100px;
}
.small{
height:50px;
width:50px;
}
.green{
background-color:green;
}
.blue{
background-color:blue;
}
btn1.onclick = function(){
test.classList.toggle('small');
}
btn2.onclick = function(){
test.classList.toggle('blue');
}
性能
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
}
/*****************************/
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
}
/*****************************/
.big{
height:100px;
width:100px;
background-color:blue;
}
.small{
height:50px;
width:50px;
background-color:green;
}
test.onclick = function(){
console.time();
for(var i = 0; i < 10000; i++){
test.className = 'small';
}
console.timeEnd();//9.534ms
}
在1万次循环中,改变style属性中的具体样式花费了59.937ms,改变style属性中的cssText花费了38.065ms,而改变css类名只花费了9.534ms
由此可见,使用脚本化CSS类的方式可以大大地提高性能
最后
脚本化CSS的场景非常常见,一直提倡使用脚本化CSS类的方式来操作CSS,以为只是为了方便。感觉脚本化CSS类应该和使用cssText的性能差不多,但没想到最终结果竟然不是同一个数量级的,改变CSS类名的性能竟然提升这么多
少一点感性认识,多一些理性测试
欢迎交流
相关阅读
发表评论