四通过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.οnlοad=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.οnlοad=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样式值。