JavaScript脚本操作CSS

脚本化CSS就是使用JavaScript脚本操作CSS，配合HTML5、Ajax、jQuery等技术，可以设计出细腻、逼真的页面特效和交互行为，提升用户体验，如网页对象的显示/隐藏、定位、变形、运动等动态样式。

1、CSS脚本化基础

CSS样式有两种形式：样式属性和样式表。DOM 2级规范提供了一套API，其中包括CSS样式表访问接口。在DOM 2级规范之前，允许使用标签对象的style属性访问行内样式属性。

1.1、访问行内样式

任何支持style特性的HTML标签，在JavaScript中都有一个对应的style脚本属性。style是一个可读可写的对象，包含了一组CSS样式。

使用style的cssText属性可以返回行内样式的字符串表示。同时style对象还包含一组与CSS样式属性一一映射的脚本属性。这些脚本属性的名称与CSS样式属性的名称对应。在JavaScript中，由于连字符是减号运算符，含有连字符的样式属性（如font-family），其脚本属性会以驼峰命名法重新命名（如fontFamily）。

【示例】border-right-color属性在脚本中应该使用borderRightColor：

javascript 复制代码

    <div id="box" >盒子</div>
    <script>
    var box = document.getElementById("box");
    box.style.borderRightColor = "red";
    box.style.borderRightStyle = "solid";
    </script>

提示：使用CSS脚本属性时，需要注意几个问题：

float是JavaScript保留字，因此使用cssFloat表示与之对应的脚本属性的名称。
在JavaScript中，所有CSS属性值都是字符串，必须加上引号。 elementNode.style.fontFamily = "Arial, Helvetica, sans-serif"; elementNode.style.cssFloat = "left"; elementNode.style.color = "#ff0000";
CSS样式声明结尾的分号不能够作为脚本属性值的一部分。
属性值和单位必须完整地传递给CSS脚本属性，省略单位则所设置的脚本样式无效。

1.2、使用style对象

DOM 2级样式规范为style对象定义了一些属性，简单说明如下：

cssText：返回style的CSS样式字符串。
length：返回style的声明CSS样式的数量。
parentRule：返回style所属的CSSRule对象。
getPropertyCSSValue()：返回包含指定属性的CSSValue对象。
getPropertyPriority()：返回包含指定属性是否附加了!important命令。
item()：返回指定下标位置的CSS属性的名称。
getPropertyValue()：返回指定属性的字符串值。
removeProperty()：从样式中删除给定属性。
setProperty()：为指定属性设置值，也可以附加优先权标志。

1.3、使用styleSheets对象

在DOM 2级样式规范中，使用styleSheets对象可以访问页面中所有样式表，包括用<style>标签定义的内部样式表，以及用<link>标签或@import命令导入的外部样式表。

cssRules对象包含指定样式表中所有的规则（样式）。

提示：IE支持rules对象表示样式表中的规则，可以使用下面代码兼容不同浏览器：

javascript 复制代码

    var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;

在上面代码中，先判断浏览器是否支持cssRules对象，如果支持则使用cssRules（非IE浏览器），否则使用rules（IE浏览器）。

【示例】通过

javascript 复制代码

    <style type="text/css">
    #box {
        width: 400px;
        height: 200px;
        background-color:#BFFB8F;
        border: solid 1px blue;
    }
    </style>
    <script>
    window.onload = function(){
        var box = document.getElementById("box");
        var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
        //判断浏览器类型
        box.innerHTML =  "<h3>盒子样式</h3>"
        box.innerHTML +=  "<br>边框：" + cssRules[0].style.border; //cssRules的border属性
        box.innerHTML +=  "<br>背景：" + cssRules[0].style.backgroundColor;
        box.innerHTML +=  "<br>高度：" + cssRules[0].style.height;
        box.innerHTML +=  "<br>宽度：" + cssRules[0].style.width;
    }
    </script>
    <div id="box"></div>

提示：cssRules（或rules）的style对象在访问CSS属性时，使用的是CSS脚本属性名，因此所有属性名称中不能使用连字符。例如：

javascript 复制代码

    cssRules[0].style.backgroundColor;

1.4、使用selectorText对象

使用selectorText对象可以获取样式的选择器字符串表示。

【示例】使用selectorText属性获取第1个样式表(styleSheets[0])中的第3个样式(cssRules[2])的选择器名称，输出显示为".blue"：

javascript 复制代码

    <style type="text/css">
    #box { color:green; }
    .red { color:red; }
    .blue { color:blue; }
    </style>
    <link href="style1.css" rel="stylesheet" type="text/css" media="all" />
    <script>
    window.onload = function(){
        var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
        var box = document.getElementById("box");
        box.innerHTML =  "第一个样式表中第三个样式选择符 = " + cssRules[2].selectorText;
    }
    </script>
    <div id="box"></div>

1.5、编辑样式

cssRules的style不仅可以读取，还可以写入属性值。

【示例】下面示例样式表中包含3个样式，其中蓝色样式类(.blue)定义字体显示为蓝色。用脚本修改该样式类（.blue规则）字体颜色为浅灰色(#999)：

javascript 复制代码

    <style type="text/css">
    #box { color:green; }
    .red { color:red; }
    .blue { color:blue; }
    </style>
    <script>
    window.onload = function(){
        var cssRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
        cssRules[2].style.color="#999";        //修改样式表中指定属性的值
    }
    </script>
    <p class="blue">原为蓝色字体，现在显示为浅灰色。</p>

提示：上述方法修改样式表中的类样式，会影响其他对象或其他文档对当前样式表的引用，因此在使用时请务必谨慎。

1.6、添加样式

使用addRule()方法可以为样式表增加一个样式，具体用法如下：

javascript 复制代码

    styleSheet.addRule(selector,style ,[index])

styleSheet表示样式表引用，参数说明如下：

selector：表示样式选择符，以字符串的形式传递。
style：表示具体的声明，以字符串的形式传递。
index：表示一个索引号，即添加样式在样式表中的索引位置，默认为-1，表示位于样式表的末尾，该参数可以不设置。Firefox支持使用insertRule()方法添加样式，用法如下： styleSheet.insertRule(rule ,[index])

参数说明如下：

rule：表示一个完整的样式字符串
index：与addRule()方法中的index参数作用相同，但默认为0，放置在样式表的末尾。

【示例】先在文档中定义一个内部样式表，然后使用styleSheets集合获取当前样式表，利用数组默认属性length获取样式表中包含的样式个数。最后在脚本中使用addRule()（或insertRule()）方法增加一个新样式，样式选择符为p，样式声明背景色为红色，字体颜色为白色，段落内部补白为1个字体大小：

javascript 复制代码

    <style type="text/css">
    #box { color:green; }
    .red { color:red; }
    .blue { color:blue; }
    </style>
    <script>
    window.onload = function(){
     var styleSheets = document.styleSheets[0];     //获取样式表引用
     var index = styleSheets.length;                //获取样式表中包含样式的个数
     if(styleSheets.insertRule){                    //判断浏览器是否支持insertRule()方法
                                                    //在内部样式表中增加p标签选择符的样式，插入样式表的末尾
          styleSheets.insertRule("p{background-color:red;color:#fff;padding:1em;}", index);
     }else{                                         //如果浏览器不支持insertRule()方法
          styleSheets.addRule("P", "background-color:red;color:#fff;padding:1em;", index);
     }
    }
    </script>
    <p>在样式表中增加样式操作</p>

1.7、读取渲染样式

CSS样式具有重叠特性，因此定义的样式与最终显示的样式并非完全相同。DOM定义了一个方法帮助用户快速检测当前对象的显示样式，不过IE和标准DOM之间实现的方法不同。

1.IE浏览器

IE使用currentStyle对象读取元素的最终显示样式，该对象为一个只读对象，包含元素的style属性，以及浏览器预定义的默认style属性。

2.非IE浏览器

DOM使用getComputedStyle()方法获取目标对象的显示样式，但是它属于document.defaultView对象。getComputedStyle()方法包含了两个参数：第一个参数表示元素，用来获取样式的对象；第二个参数表示伪类字符串，定义显示位置，一般可以省略，或者设置为null。

【示例】使用if语句判断当前浏览器是否支持document.defaultView，如果支持则进一步判断是否支持document.defaultView.getComputedStyle，如果支持则使用getComputedStyle()方法读取最终显示样式；否则，判断当前浏览器是否支持currentStyle，如果支持则使用它读取最终显示样式：

javascript 复制代码

    <style type="text/css">
    #box { color:green; }
    .red { color:red; }
    .blue {color:blue; background-color:#FFFFFF;}
    </style>
    <script>
    window.onload = function(){
        var styleSheets = document.styleSheets[0];        //获取样式表引用指针
        var index = styleSheets.length;                   //获取样式表中包含样式的个数
        if(styleSheets.insertRule){                       //判断浏览器是否支持
          styleSheets.insertRule("p{background-color:red;color:#fff;padding:1em;}", index);
        }else{
         styleSheets.addRule("P", "background-color:red;color:#fff;padding:1em;", index);
        }
        var p = document.getElementsByTagName("p")[0];
        if( document.defaultView && document.defaultView.getComputedStyle)
         p.innerHTML = "背景色："+document.defaultView.getComputedStyle(p,null).backgroundColor+"<br>字体颜色："+document.
defaultView.getComputedStyle(p,null).color;
        else if( p.currentStyle)
         p.innerHTML = "背景色："+p.currentStyle.backgroundColor+"<br>字体颜色："+p.currentStyle.color;
        else p.innerHTML = "当前浏览器无法获取最终显示样式";
    }
    </script>
    <p class="blue">在样式表中增加样式操作</p>

1.8、读取媒体查询

使用window.matchMedia()方法可以访问CSS的Media Query语句。window.matchMedia()方法接收一个mediaQuery语句的字符串作为参数，返回一个MediaQueryList对象。该对象有以下两个属性：

media：返回所查询的mediaQuery语句字符串。
matches：返回一个布尔值，表示当前环境是否匹配查询语句。

javascript 复制代码

    var result = window.matchMedia('(min-width: 600px)');
    result.media                                          //(min-width: 600px)
    result.matches                                        //true

【示例1】根据mediaQuery是否匹配当前环境，执行不同的JavaScript代码：

javascript 复制代码

    var result = window.matchMedia('(max-width: 700px)');
    if (result.matches) {
        console.log('页面宽度小于等于700px');
    } else {
        console.log('页面宽度大于700px');
    }

【示例2】根据mediaQuery是否匹配当前环境，加载相应的CSS样式表：

javascript 复制代码

    var result = window.matchMedia("(max-width: 700px)");
    if (result.matches){
        var linkElm = document.createElement('link');
        linkElm.setAttribute('rel', 'stylesheet');
        linkElm.setAttribute('type', 'text/css');
        linkElm.setAttribute('href', 'small.css');
        document.head.appendChild(linkElm);
    }

注意：如果window.matchMedia无法解析mediaQuery参数，应该返回false，而不是报错。例如：

javascript 复制代码

    window.matchMedia('bad string').matches  //false

window.matchMedia方法返回的MediaQueryList对象有两个方法，用来监听事件：addListener方法和removeListener方法。如果mediaQuery查询结果发生变化，就调用指定回调函数。例如：

javascript 复制代码

    var mql = window.matchMedia("(max-width: 700px)");
    //指定回调函数
    mql.addListener(mqCallback);
    //撤销回调函数
    mql.removeListener(mqCallback);
    function mqCallback(mql) {
        if (mql.matches) {
    //宽度小于等于700px
        } else {
    //宽度大于700px
        }
    }

上面代码中，回调函数的参数是MediaQueryList对象。回调函数的调用可能存在两种情况：一种是显示宽度从700px以上变为以下，另一种是从700px以下变为以上，所以在回调函数内部要判断一下当前的屏幕宽度。

2、实战

2.1、获取元素尺寸

使用offsetWidth和offsetHeight属性可以获取元素的尺寸，其中offsetWidth表示元素在页面中所占据的总宽度，offsetHeight表示元素在页面中所占据的总高度。

【示例】使用offsetWidth和offsetHeight属性获取元素大小。

javascript 复制代码

    <div style="height:200px;width:200px;">
        <div style="height:50%;width:50%;">
            <div style="height:50%;width:50%;">
                <div style="height:50%;width:50%;">
                    <div id="div" style="height:50%;width:50%;border-style:solid;"></div>
                </div>
            </div>
        </div>
    </div>
    <script>
    var div = document.getElementById("div");
    var w = div.offsetWidth;                   //返回元素的总宽度
    var h = div.offsetHeight;                  //返回元素的总高度
    </script>

提示：上面示例在怪异模式下和标准模式的浏览器中解析结果差异很大，其中怪异模式解析返回宽度为21px，高度为21px，而在标准模式的浏览器中返回高度和宽度都为19px。

注意，offsetWidth和offsetHeight是获取元素尺寸的最好方法，但是当元素隐藏显示时，即设置样式属性display的值为none时，则offsetWidth和offsetHeight属性返回值都为0。