轻巧学习JavaScript二十五：DOM编程学习之操作CSS样式(二)
四通过class属性操作外联式
还是先来一个HTML文档的代码：
<!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" />
<!--链接到外联式CSS样式表-->
<link rel="stylesheet" type="text/css" href="style.css" />
<title>DOM</title>
<script type="text/javascript">
window.onload=function(){
}
</script>
</head>
<body>
<div id="box">div区域</div>
</body>
</html>
CSS样式表style.css文件的代码：.box1{
background-color:#00FF00;
}
.box2 {
color:#FFFFFF;
}
.box3 {
font-size:24px;
} 那么通过上篇说到的三个函数继续来操作添加class的JS代码：//获取指定的元素节点
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.cName.replace(new RegExp("(\\s|^)"+cName+"(\\s|$)")," ");
}
}; 添加前的效果：再来进行操作删除class的HTML文档代码：
<!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" />
<!--链接到外联式CSS样式表-->
<link rel="stylesheet" type="text/css" href="style.css" />
<title>DOM</title>
<script type="text/javascript">
window.onload=function(){
}
</script>
</head>
<body>
<div id="box" class="box1 box2 box3">div区域</div>
</body>
</html> 进行删除的JS代码：//获取指定的元素节点
var box=document.getElementById("box");
//删除指定的class
removeClass(box,"box2");
removeClass(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.cName.replace(new RegExp("(\\s|^)"+cName+"(\\s|$)")," ");
}
}; 添加前的效果：通过第三种和第四种我们得出结论：
(1)上述添加和删除指定的class对于内嵌式和外联式都是适用的，我已经两种方式都尝试过了，效果也符合设置
的CSS样式。
(2)添加和删除之前一定要先获取指的定元素节点，再对元素节点的添加或删除指定的class。
(3)添加的class一定要先预备写在内嵌式中或外联式中，这样可以方便操作，多的是两者相比起来，我们用的多
的是外联式。
(4)第三种和第四种通过class来操作CSS样式是我们用的是比较多的，这种方法只能修改和改变CSS样式，并不
能得到CSS样式值。
五操作内嵌式或外联式(通过外联式检验)
我们使用的HTML文档和CSS样式表和上面的相同。
由于内嵌式和外联式都是通过标签的方式导入的，那么我们可以只是检验其中一种即可。CSSStyleSheet类型表
示通过<link>元素和<style>元素包含的样式表。这两个元素本身返回的是HTMLLinkElement和HTMLStyleElement类
型，但是CSSStyleSheet类型更通用一些，得到这个类型非IE使用sheet属性，IE使用styleSheet属性。那么我们来看
怎么获取：
实例：
var linkElement=document.getElementsByTagName("link")[0];
alert(linkElement);//返回：object HTMLLinkElement
//做到浏览器兼容
var sheet=linkElement.sheet||linkElement.styleSheet;
alert(sheet)//返回：object CSSStyleSheet
除了上述获取CSSStyleSheet类型的方法，还有一种方法是通过document对象的styleSheets属性来获取，这个属
性并不存在浏览器兼容性问题，因此我们建议使用这种方式获取：
var sheet=document.styleSheets[0]; alert(sheet);//返回：object CSSStyleSheet
CSSStyleSheet对象类型的属性或方法：
上表中最常用的就是cssRules属性，deleteRule()方法和insertRule()方法，但是这三个在IE浏览器等有些浏览器并
不兼容，IE对应的三个方法为：rules属性，removeRule()方法和addRule()方法。
(1)通过非IE的cssRules属性和IE的rules属性，我们可以获得样式表的规则集合列表，这样我们就可以对每个样
式进行具体的操作了。
实例var sheet=document.styleSheets[0]; alert(sheet);//返回：object CSSStyleSheet var rules=sheet.cssRules||sheet.rules; alert(rules);//返回：object CSSRuleList var rule=rules[0];//样式表的第一个规则 alert(rule);//返回：object CSSStyleRule
CSSStyleRule可以使用的属性：
实例：
var sheet=document.styleSheets[0];
alert(sheet);//返回：object CSSStyleSheet
var rules=sheet.cssRules||sheet.rules;
alert(rules);//返回：object CSSRuleList
var rule=rules[0];
alert(rule);//返回：object CSSStyleRule
alert(rule.cssText);//返回：.box1{ background-color:rgb(0,250,0); }
alert(rule.style.backgroundColor);//返回：rgb(0,250,0)
注意：谷歌等浏览器在本地运行时会出现问题，rules会变成null，只要把它放到服务器上运行即可。除了可以获
取到CSS样式的值，我们也可以对其进行设置。
实例：var sheet=document.styleSheets[0]; alert(sheet);//返回：object CSSStyleSheet var rules=sheet.cssRules||sheet.rules; alert(rules);//返回：object CSSRuleList var rule=rules[1]; alert(rule);//返回：object CSSStyleRule rule.style.color="black";设置之前：
(2)为了实现添加第一条规则并且兼容所有浏览器，我们有必须要重写函数：
function insertRule(sheet,selectorText,cssText,position){
//非IE
if(sheet.insertRule){
sheet.insertRule(selectorText+"{"+cssText+"}",position);
}
//IE
else if(sheet.addRule){
sheet.addRule(selectorText,cssText,position);
}
}
我们来检验一下：
var sheet=document.styleSheets[0];
//向CSS规则列表中添加至第一个位置
insertRule(sheet,"body","background-color:red",0);
function insertRule(sheet,selectorText,cssText,position){
//非IE
if(sheet.insertRule){
sheet.insertRule(selectorText+"{"+cssText+"}",position);
}
//IE
else if(sheet.addRule){
sheet.addRule(selectorText,cssText,position);
}
} 未添加前：function deleteRule(sheet,position){
//非IE
if(sheet.deleteRule){
sheet.deleteRule(position);
}
//IE
else if(sheet.removeRule){
sheet.removeRule(position);
}
}
继续检验：var sheet=document.styleSheets[0];
//删除CSS规则列表中第一条规则
deleteRule(sheet,0);
function deleteRule(sheet,position){
//非IE
if(sheet.deleteRule){
sheet.deleteRule(position);
}
//IE
else if(sheet.removeRule){
sheet.removeRule(position);
}
} 删除之前：删除之后：
第五种方式使用cssRules属性或rules属性，内嵌式或外联式是既可以获取CSS属性样式值的，也可以进行设置
CSS样式值。