C语言中文网教程离线版下载（PDF下载）

首页 > 编程笔记 > JavaScript笔记 > JS操作CSS样式阅读：46

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() 能够获取指定元素样式属性的值。用法如下：

var value = e.style.getPropertyValue(propertyName)

参数 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() 方法为指定元素设置样式。用法如下：

e.style.setProperty(propertyName, value, priority)

参数说明如下：

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 属性的样式声明。具体用法如下：

e.style.removeProperty(propertyName)

item() 方法

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

var name = e.style.item(index)

参数 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);
}

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

Started : elapsed time is 0
New loop started at time 3.01200008392334
New loop started at time 6.00600004196167
Ended: elapsed time is 9.234000205993652

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

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

优秀文章

精美而实用的网站，提供C语言、C++、STL、Linux、Shell、Java、Go语言等教程，以及socket、GCC、vi、Swing、设计模式、JSP等专题。

↑