标签：
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.onload=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.onload=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.onload=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|$)")," ");
}
};
添加前的效果：
轻松学习JavaScript二十四：DOM编程学习之操作CSS样式(一)
标签：
原文地址：http://blog.csdn.net/erlian1992/article/details/50382263
