轻松学习JavaScript二十五：DOM编程学习之操作CSS样式(二)

最新推荐文章于 2021-10-17 11:02:44 发布

life is wonderful

最新推荐文章于 2021-10-17 11:02:44 发布

阅读量2.6k

点赞数 1

分类专栏： JavaScript DOM编程学习文章标签： DOM编程 Web前端开发 Javascript DOM DOM对象模型

本文链接：https://blog.csdn.net/erlian1992/article/details/50389000

版权

JavaScript 同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

DOM编程学习

12 篇文章 6 订阅

订阅专栏

四通过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);
	}
}

未添加前：

添加之后：

(3)为了实现删除第一条规则并且兼容所有浏览器，我们有必须要重写函数：

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样式值。

life is wonderful

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
轻松学习JavaScript二十五：DOM编程学习之操作CSS样式(二)

四通过class属性操作外联式还是先来一个HTML文档的代码：DOMwindow.onload=function(){ }div区域 CSS样式表style.css文件的代码：.box1{ background-color:#00FF00; }.box2 { color:#FFFFFF;}
复制链接

扫一扫

专栏目录