轻松学习JavaScript二十四：DOM编程学习之操作CSS样式(一)-优快云博客

本文链接：https://blog.youkuaiyun.com/erlian1992/article/details/50382263

CSS样式作为HTML的辅助，可以增强页面的显示效果。前面学了DOM操作HTML，因此也要学DOM操作CSS

样式的方法。在学习CSS的时候，已经知道了CSS插入到HTML文档有三种情况，分别为：行内式，内嵌式和外联式

(这是我们最常用的)。下面就来看怎么操作这三种情况：

一操作行内式

先来写一个HTML文档：

<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM</title>
<script type="text/javascript">
window.οnlοad=function(){
    
}
</script>
</head>

<body>
<div id="box" style="background-color:#00FF00; color:#FFFFFF; font-size:24px; float:right;">div区域</div>
</body>
</html></span>

任何HTML元素标签都会有一个通用的属性：style，它会返回CSSStyleDeclaration对象。下面的是最常见的

JavaScript DOM访问CSS行内样式的方式。

CSS属性和JavaScript调用

实例：

<span style="font-size:18px;">//获取行内式样式所在元素节点
var box=document.getElementById("box");
alert(box.style);//返回：object CSSStyleDeclaration表示样式对象
alert(box.style.color);//返回：rdb(255,255,255)表示白色，不同的浏览器会有不同的结果
alert(box.style.backgroundColor);//返回：rdb(0,255,0)表示绿色，不同的浏览器会有不同的结果
alert(box.style.cssFloat||box.style.styleFloat);//返回：right</span>

从上面的JavaScript调用的方式我们需要注意：

(1)如果是一般的CSS属性，调用时使用它的属性名即可。如：style.color。

(2)如果像background-color这样的CSS属性，调用的时候必须使用去掉减号，第二个单词首字母需要大写，因此

要转化成backgroundColor。

(3)如果是CSS的flaot属性，由于浏览器的兼容问题，非IE的浏览器使用cssFloat，IE浏览器使用styleFloat。为了

确保所有的浏览器兼容，可以写成：style.cssFloat||box.style.styleFloat这样的形式。

以上只是说明了获取的方式，那么除了获取CSS样式外，也可以对其进行赋值操作:

<span style="font-size:18px;">var box=document.getElementById("box");
alert(box.style);//返回：object CSSStyleDeclaration表示样式对象
box.style.color="#FF0000";//重新为color属性赋值为：#FF0000(红色)
//重新为float属性赋值为：none
box.style.cssFloat!="undefined"?box.style.cssFloat="none":box.style.styleFloat="none";</span>

赋值前的效果：

赋值后的效果：

style属性仅仅只能操作和设置行内的CSS样式，对于另外两种形式：内嵌式<style>和外联式<link>是无法获取得

到的。还有就是可以通过style来获取单一值的CSS样式，但是对于复合值的CSS样式信息，就需要通过计算来获取。

二获取符合值的CSS样式

DOM中的window对象提供了getComputedStyle()方法，该方法接受两个参数，需要计算的样式元素，第二个伪

类(类似于:hover)，如果没有伪类，就填写null即可。但是还是会有一个兼容性的问题，IE并不支持这个方法，它有一

个类似的属性可以使用currentStyle属性。

实例：

<span style="font-size:18px;">var box=document.getElementById("box");
//为style样式对象做兼容
var style=window.getComputedStyle?window.getComputedStyle(box,null):null||box.currentStyle;
alert(style);//返回：object CSSStyleDeclaration表示样式对象
alert(style.color);//返回：rdb(255,255,255)不，同的浏览器会有不同的结果
alert(style.border);//不同的浏览器返回不同的结果
alert(style.fontFamily);//计算显示复合的样式值</span>

从上面的结果可以看出：有些CSS样式在每个浏览器都有不同的结果，例如border属性是一个综合属性，所以它

在谷歌浏览器和2345浏览器都会显示，火狐为空，IE为undefined。所谓综合属性就是XHTML所谓的简写形式，因此

DOM在获取CSS样式的时候，最好采用完整的写法兼容性最好，比如：border-top-color之类的。

我们使用windos对象下的getComputedStyle()方法和currentStyle属性方法只能获取无法进行设置。

三通过class属性操作内嵌式

使用style属性可以设置行内的CSS样式，而通过id和class调用是最常用的方法，但是id在整个HTML是唯一确定

的，一旦改变，会造成灾难性的后果，因此我们一般不去改写id属性的值。

在操作CSS样式的过程中我们一般通过改写class属性的值来达到效果。前面学习CSS选择器的时候，其中的类选

择器可以是多类选择器，也就是一个class值中可能包含一个词列表，各个词之间用空格分隔，那么如果我们想添加一

个class时，可以使用这种方法。

在添加className的时候，我们想给一个添加多个class是没有方法，后面一个必将覆盖掉前面一个，所以必须来

写三个函数：

(1)判断是否存在这个class

<span style="font-size:18px;">function hasClass(element,cName){
       return element.className.match(new RegExp("(\\s|^)"+cName+"(\\s|$)"));
};</span></span>

(2)如果不存在要指定添加的class，添加这个class

<span style="font-size:18px;">function addClass(element,cName){
       if(!hasClass(element,cName)){
               element.className+=" "+cName;
       }
};</span>

(3)如果存在指定要删除的class，删除它

<span style="font-size:18px;">function removeClass(element,cName){
       if(hasClass(element,cName)){
	        element.className=element.className.replace(new RegExp("(\\s|^)"+cName+"(\\s|$)")," ");
       }
};</span>

接下来我们检验一下这三个函数，先写好HTML文档要要操作的类选择器：

<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM</title>
<style type="text/css">
.box1{
    background-color:#00FF00;  
}
.box2 {
    color:#FFFFFF;
}  
.box3 {
    font-size:24px;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
    
}
</script>
</head>

<body>
<div id="box">div区域</div>
</body>
</html></span>

先检验下面的代码：

<span style="font-size:18px;">//获取指定的元素节点
var box=document.getElementById("box");
//向div中的class属性添加
addClass(box,"box1");
addClass(box,"box2");
addClass(box,"box3");
	
//判断是否存在这个class
function hasClass(element,cName){
        return element.className.match(new RegExp("(\\s|^)"+cName+"(\\s|$)"));
};
//如果不存在的话，添加一个class
function addClass(element,cName){
        if(!hasClass(element,cName)){
	       element.className+=" "+cName;
        }
};
//如果存在的话，删除一个class
function removeClass(element,cName){
        if(hasClass(element,cName)){
	       element.className=element.className.replace(new RegExp("(\\s|^)"+cName+"(\\s|$)")," ");
        }
};</span>

添加前的效果：

添加后的效果：

再来检验下面的代码，还是先来HTML文档代码：

<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DOM</title>
<style type="text/css">
.box1{
    background-color:#00FF00;  
}
.box2 {
    color:#FFFFFF;
}  
.box3 {
    font-size:24px;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
   
}
</script>
</head>

<body>
<div id="box" class="box1 box2 box3">div区域</div>
</body>
</html></span>

下面的是JS代码：

//获取指定的元素节点
var box=document.getElementById("box");
//删除指定的class
removeClass(box,"box2");
//判断是否存在这个class
function hasClass(element,cName){
        return element.className.match(new RegExp("(\\s|^)"+cName+"(\\s|$)"));
};
//如果不存在的话，添加一个class
function addClass(element,cName){
        if(!hasClass(element,cName)){
	        element.className+=" "+cName;
        }
};
//如果存在的话，删除一个class
function removeClass(element,cName){
        if(hasClass(element,cName)){
	     element.className=element.className.replace(new RegExp("(\\s|^)"+cName+"(\\s|$)")," ");
        }
};

添加前的效果：