一、脚本化行间样式
概念
页面引入css的方法有三种，分别是外部样式、内部样式和行间样式（内联样式）。css脚本化就是用Javascript操作css的意思。Javascript中有两种方法可以实现行间样式的脚本化，其一操作元素的style属性，其二操作标签的style特性。行间样式的脚本化方法不能操作外部样式和内部样式。

操作元素的style属性
style属性用来读写标签的行间样式（不能读写外部样式和内部样式），返回结果是一个css样式表，该样式表的属性值是字符串类型。样式表中属性名如果包含连字符，改为小驼峰式写法。读取没有设置过的行间样式返回空串。float是Javascript中的保留字，不能作为属性名，规定用cssFloat替代float，存在特例（ie8及以下版本的浏览器不支持cssFloat，使用styleFloat代替）。

<style>
    div{
        width:100px;
    }
</style>
<div id="div" style="float:left;height:100px;background-color:red;"></div>
<script>
    console.log(div.style.height);          //"100px"
    console.log(div.style.width);           //"", 无法获取内部样式
    console.log(div.style.backgroundColor); //"red"
    //ie8及以下版本的浏览器返回undefined，其他浏览器返回'left'
    console.log(div.style.cssFloat);  
    //ie浏览器返回'left'，其他浏览器返回undefined      
    console.log(div.style.styleFloat);     
</script>
<style>
    .red{
        width:100px;
        height:100px;
        background-color:red;
    }
    .green{
        width:200px;
        height:200px;
        background-color:green;
    }
</style>
<div id="div" class="red"></div>
<script>
    div.onclick = function(){
        div.className = "green";// 通过替换class属性来修改样式比操作style效率高，好维护
        //dom相当于js和html之间的桥梁，每次调用dom都是一次效率的损耗
        //div.style.width = "200px"
        //div.style.height = "200px"
        //div.style.backgroundColor = "red";
        //使用style进行了三次dom的调用，效率低
    }
</script>
样式表的cssText属性可以批量操作行间样式。写入操作接收一个字符串，重写整个style特性值（复合属性名不需要改为小驼峰）。读取操作以字符串形式返回整个style特性。该属性可以一次性应用多种变化，是脚本化行间样式中给元素应用多项变化最快捷的方式。cssText在ie8及以下版本的浏览器中返回的属性名都是大写。

<div id="div" style="height: 40px;width: 40px;background-color: red;"></div>
<script>
    //ie8及以下版本的浏览器返回'HEIGHT: 40px; WIDTH: 40px; BACKGROUND-COLOR: red;'
    //其他浏览器返回'height: 40px; width: 40px;background-color: red;'
    console.log(div.style.cssText);
    //批量修改行间样式
    div.style.cssText= "height: 20px;width: 40px;background-color: yellow";
    //"height: 20px;width: 40px;background-color: yellow"
    console.log(div.style.cssText);
</script>
操作标签的style特性
style特性值就是元素的行间样式，操作style特性的本质就是操作行间样式。操作标签特性的方法有hasAttribute()、getAttribute()、setAttribute()和removeAttribute()等。

<style>
    div{
        background-color:red;
    }
</style>
<div id="div" style="height: 40px;width: 40px;"></div>
<script>
    console.log(div.hasAttribute('style')); //true
    console.log(div.getAttribute('style')); //'height: 40px;width: 40px;'
    div.setAttribute('style','height:10px;');
    console.log(div.getAttribute('style')); //'height:10px;'
    div.removeAttribute('style');
    console.log(div.hasAttribute('style')); //false
    console.log(div.getAttribute('style')); //null
</script>
二、脚本化css类
概述
脚本化css类用于大量操作css样式的场景，个别css样式的修改一般直接操作行间样式。脚本化css类是指在样式文件中提前写好样式类，修改样式时直接操作类名的方式。

<style>
    .red{
        width:100px;
        height:100px;
        background-color: red;
    }
    .yellow{
        width:100px;
        height:100px;
        background-color: yellow;
    }
</style>
<div id="div" class="red"></div>
<button id="btn">切换颜色</button>
<script>
    btn.onclick = function(){
        div.className = "yellow";
    }
</script>
元素的classList属性可以同时操作多个类名，使用起来更加方便。classList属性在ie8及以下版本的浏览器中不兼容。

<script>
    btn.onclick = function(){
        div.classList.toggle('yellow');
    }
</script>
性能测试
脚本化行间样式和脚本化css类的性能对比。如下代码所示，脚本化css类的性能更好。

<div id="div"></div>
<script>
    console.time();
    for(var i = 0; i < 10000; i++){
        div.style.backgroundColor = 'red';
        div.style.height = '50px';   
        div.style.width = '50px';        
    }
    console.timeEnd(); //default: 57.638916015625ms
</script>
<div id="div"></div>
<script>
    console.time();
    for(var i = 0; i < 10000; i++){
        div.style.cssText = "height:50px;width:50px;background-color:red;";      
    }
    console.timeEnd(); //default: 36.943115234375ms
</script>
<style>
    .red{
        width:50px;
        height:50px;
        background-color:red;
    }
</style>
<div id="div"></div>
<script>
    console.time();
    for(var i = 0; i < 10000; i++){
        div.className = "red";        
    }
    console.timeEnd(); //default: 8.7880859375ms
</script>

回帖奖励 +1 黑马币