JS操作CSS样式（非常详细）

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

读写行内样式

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

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

示例

对于 border-right-color 属性来说，在脚本中应该使用 borderRightColor。

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

使用 CSS 脚本属性时，需要注意以下几个问题。

1) float 是 JavaScript 保留字，因此使用 cssFloat 表示与之对应的脚本属性的名称。

2) 在 JavaScript 中，所有 CSS 属性值都是字符串，必须加上引号。

elementNode.style.fontFamily = "Arial, Helvetica, sans-serif";
elementNode.style.cssFont = "left";
elementNode.style.color = "#ff0000";

3) CSS 样式声明结尾的分号不能够作为脚本属性值的一部分。

4) 属性值和单位必须完整的传递给 CSS 脚本属性，省略单位则所设置的脚本样式无效。

elementNode.style.width = "100px";
elementNode.style.width =  width + "px";

使用 style 对象

DOM 2 级规范为 style 对象定义了一些属性的方法，简单说明如下。

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

下面重点介绍几个常用的方法：

getPropertyValue() 方法

getPropertyValue() 能够获取指定元素样式属性的值。用法如下：

参数 propertyName 表示 CSS 属性名，不是 CSS 脚本属性名，复合名应使用连字符进行连接。

【示例1】下面代码使用 getPropertyValue() 方法获取行内样式中 width 属性值，然后输出到盒子内显示。

<script>
    window.onload = function(){
        var box = document.getElementById("box");   //获取<div id="box">
        var width = box.style.getPropertyValue("width");  //读取div元素的width属性值
        box.innerHTML =  "盒子宽度：" + width;    //输出显示width值
    }
</script>
<div id="box" style="width:300px; height:200px;border:solid 1px red" >盒子</div>

演示效果如下：

setProperty() 方法

setProperty() 方法为指定元素设置样式。用法如下：

参数说明如下：

• propertyname：设置 CSS 属性名
• value：设置 CSS 属性值，包含属性值的单位。
• priority：表示是否设置 !important 优先级命令，如果不设置可以以空字符串表示。

【示例2】在下面示例中使用 setProperty() 方法定义盒子的显示宽度和高度分别为 400 像素和 200 像素。

<script>
    window.onload = function(){
        var box = document.getElementById("box");  //获取<div id="box">
        var width = box.style.width;  //读取div元素的width属性值
        box.innerHTML =  "盒子宽度：" + width;  //输出显示width值
    }
</script>
<div id="box" style="width:300px; height:200px; border:solid 1px red" >盒子</div>

removeProperty() 方法

removeProperty() 方法可以移出指定 CSS 属性的样式声明。具体用法如下：

item() 方法

item() 方法返回 style 对象中指定索引位置的 CSS 属性名称。具体用法如下：

参数 index 表示 CSS 样式的索引号。

getPropertyPriority() 方法

getPropertyPriority() 方法可以获取指定 CSS 属性中是否添加了 !important 优先级命令，如果存在则返回“important”字符串，否则返回空字符串。

【示例3】在下面示例中，定义鼠标指针移过盒子时，设置盒子的背景色为蓝色，边框颜色为红色，当移出盒子时，又恢复到盒子默认设置的样式；而单击盒子时则在盒子内输出动态信息，显示当前盒子的高度和宽度。

<script>
    window.onload = function () {
        var box = document.getElementById("box");  //获取盒子的引用
        box.onmouseover = function () {  //定义鼠标经过时的事件处理函数
            box.style.setProperty("background-color", "blue", "");  //设置背景色为蓝色
            box.style.setProperty("border", "solid 50px red", "");  //设置边框为50像素红色实线
        }
        box.onclick = function () {  //定义鼠标单击事件处理函数
            box.innerHTML = (box.style.item(0) + ":" + box.style.getPropertyValue("width"));  //显示盒子的宽度
            box.innerHTML = box.innerHTML + "<br>" + (box.style.item(1) + ":" + box.style.getPropertyValue("height"));  //显示盒子的高度
        }
        box.onmouseout = function () {  //定义鼠标移出时的事件处理函数
            box.style.setProperty("background-color", "red", "");  //设置背景色为红色
            box.style.setProperty("border", "solid 50px blue", "");  //设置边框为50像素的蓝色实线
        }
    }
</script>
<div id="box" style="width:100px; height:100px; background-color:red; border:solid 50px blue;">

显示效果如下： 

 

 

【示例4】针对示例 3，可以使用点语法快速设计相同的交互效果，这样能够兼容 IE 早期的版本，JavaScript 代码如下：

<script>
window.onload = function(){
     var box = document.getElementById("box");   //获取盒子的引用
     box.onmouseover = function(){
         box.style.backgroundColor = "blue";   //设置背景样式
         box.style.border = "solid 50px red";    //设置边框样式
     }
     box.onclick = function(){       //读取并输出行内样式
         box .innerHTML = "width:" + box.style.width;
         box .innerHTML = box .innerHTML + "<br>" +  "height:" + box.style.height;
     }
     box.onmouseout = function(){      //设计鼠标移之后，恢复默认样式
         box.style.backgroundColor = "red";
         box.style.border = "solid 50px blue";
     }
}
</script>
<div id="box" style="width:100px; height:100px; background-color:red; border:solid 50px blue;"></div>

编辑样式

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

示例

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

<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>

演示效果如下： 

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

读取媒体查询

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

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

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

示例1

下面示例根据 mediaQuery 是否匹配当前环境，执行不同的 JavaScript 代码。

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

示例2

下面示例根据 mediaQuery 是否匹配当前环境，加载相应的 CSS 样式表。

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，而不是报错。例如：

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

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

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

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

使用 CSS 事件

transitionEnd 事件

CSS 的过渡效果（transition）结束后，触发 transitionEnd 事件。例如：

el.addEventListener ('transitionend', 'onTransitionEnd', false);
functioin onTransitionEnd () {
    console.log('Transition end');
}

transitionEnd 的事件对象具有以下属性：

• propertyName：发生 transition 效果的 CSS 属性名。
• elapsedTime：transition 熬过持续的秒数，不含 transition-delay 的时间。
• pseudoElement：如果 transition 效果发生在伪元素上，会返回该伪元素的名称，以“::”开头。如果没有发生在伪元素上，则返回一个空字符串。

实际使用 transitionend 事件时，可能需要添加浏览器前缀。

el.addEventListener ('webkitTransitionEnd', function () {
    el.style.transition = 'none';
});

animationstart、animationend、animationiteration 事件

CSS 动画有以下 3 个事件：

• animationstart 事件：动画开始时触发。
• animationend 事件：动画结束时触发。
• animationiteration 事件：开始新一轮动画循环时触发。如果 animation-iteration-count 属性等于 1，该事件不触发，即只播放一轮 CSS 动画，不会触发 animationiteration 事件。

【示例】这 3 个事件的事件对象，都有 animationName 属性（返回产生过渡效果的 CSS 属性名）和 elapsedTime 属性（动画已经运行的秒数）。对于 animationstart 事件，elapsedTime 属性等于 0，除非 animation-delay 属性等于负值。

var el = document.getElementById("animation");
el.addEventListener("animationstart", listener, false);
el.addEventListener("animationend", listener, false);
el.addEventListener("animationiteration", listener,false);
function listener (e) {
    var li = document.createElement("li");
    switch (e.type) {
        case "animationstart" :
            li.innerHTML = "Started : elapsed time is" + e.elapsedTime;
            break;
        case "animationend" :
            li.innerHTML = "Ended: elapsed time is" + e.elapsedTime;
            break;
        case "animationiteration" :
            li.innerHTML = "New loop started at time" + e.elapsedTime;
            break;
    }
    document.getElementById("output").appendChild(li);
}

上面代码的运行结果如下：

animation-play-state 属性可以控制动画的状态（暂停/播放），该属性需要加上浏览器前缀。

element.style.webkitAnamationPlayState = "paused";
element.style.webkitAnamationPlayState = "running";