您的位置:首页> 前端教程> JS教程
文章导航

JavaScript classList 属性

2018-11-10 14:41| 作者: admin| 查看: 1979| 评论: 0|来自: 蚂蚁部落

classList属性可以获取应用于指定元素上的样式类集合。

通过HTML元素的class属性为其设置样式类。

此属性是HTML5新增。

代码片段如下:

[HTML] 纯文本查看 复制代码
<div class="a">蚂蚁部落</div>

classList属性可以获取class的属性值"a",返回值是一个只包含一个元素的集合。

为什么说返回值是一个集合呢,因为HTML元素的class属性值可以包含多个样式类。

代码片段如下:

[HTML] 纯文本查看 复制代码
<div class="a b c">蚂蚁部落</div>

上述代码为div元素应用了三个class样式类。

语法结构:

[JavaScript] 纯文本查看 复制代码
element.classList

在HTML5之前可以使用className也可以实现相同的功能,但没有classList方便。

两个属性具体差别可以参阅classList与className区别一章节。

浏览器兼容性:

(1).IE10+浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).火狐浏览器支持此属性。

(5).opera浏览器支持此属性。

(6).safria浏览器支持此属性。

代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title> 
<style>
.a{
  width:150px;
  height:60px;
} 
.b{
  text-align:center;
  line-height:60px;
}
.c{
  background-color:#ccc;
  color:red;
}
</style> 
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  console.log(odiv.classList);
}
</script>  
</head>  
<body>  
<div id="ant" class="a b c">蚂蚁部落</div>
</body>  
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/10/144254hb7vvomalnnt2ohb.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

代码分析如下:

(1).通过class属性为div元素设置了三个样式类。

(2).classList属性返回一个集合,此集合具有三个元素,分别是class属性设置的三个样式类名。

(3).集合length属性返回集合元素的数量。

(4).集合value属性返回元素class属性值。

(5).集合还具有其他方法,下面将通过代码实例做介绍。

一.add方法:

此方法可以为当前元素添加一个指定的class样式类。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title> 
<style>
.a{
  width:150px;
  height:60px;
} 
.b{
  text-align:center;
  line-height:60px;
}
.c{
  background-color:#ccc;
  color:red;
}
</style> 
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.classList.add("c");
  }
}
</script>  
</head>  
<body>  
<div id="ant" class="a b">蚂蚁部落</div>
<input type="button" id="bt" value="查看效果"/>
</body>  
</html>

点击按钮之后,可以为div元素添加class样式类"c"。

添加样式类后截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/10/144325iuhuxwjo75s4h4mw.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到div元素class属性值已经增加了"c"。

二.contains方法:

此方法可以判断指定元素是否具有指定名称的class样式类。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title> 
<style>
.a{
  width:150px;
  height:60px;
} 
.b{
  text-align:center;
  line-height:60px;
}
.c{
  background-color:#ccc;
  color:red;
}
</style> 
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  console.log(odiv.classList.contains("b"));
  console.log(odiv.classList.contains("c"));
}
</script>  
</head>  
<body>  
<div id="ant" class="a b">蚂蚁部落</div>
</body>  
</html>

控制台打印效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/10/144353kqxl1qhhsl8y8sy3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

如果具有指定的样式类,那么方法返回true,否则返回false。

三.item方法:

此方法可以获取集合中指定位置class样式类名称。

参数是一个数字,表示样式类名称在集合中的位置,从0开始计算。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title> 
<style>
.a{
  width:150px;
  height:60px;
} 
.b{
  text-align:center;
  line-height:60px;
}
.c{
  background-color:#ccc;
  color:red;
}
</style> 
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  console.log(odiv.classList.item(1));
}
</script>  
</head>  
<body>  
<div id="ant" class="a b">蚂蚁部落</div>
</body>  
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/10/144424s8jjkx5ackb3bcaw.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

索引为值从0开始计算,那么上述代码可以获取集合中第二个样式类的名称。

集合中类名的顺序按照HTML元素class属性值规定的类名从左到右计算。

四.remove方法:

此方法可以删除一个或者多个指定的样式类。

参数是要移除的类名,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title> 
<style>
.a{
  width:150px;
  height:60px;
} 
.b{
  text-align:center;
  line-height:60px;
}
.c{
  background-color:#ccc;
  color:red;
}
</style> 
<script>
window.onload=function(){
  let odiv=document.getElementById("ant");
  let obt=document.getElementById("bt");
  obt.onclick=function(){
    odiv.classList.remove("a","b");
  }
}
</script>  
</head>  
<body>  
<div id="ant" class="a b c">蚂蚁部落</div>
<input type="button" id="bt" value="查看效果"/>
</body>  
</html>

点击按钮可以删除样式类"a"和"b",删除后截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201811/10/144451odlznt48ueul0ld0.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到样式类"a"与"b"已经被删除。

五.toggle方法:

此方法稍微复杂一点点,考虑到篇幅问题,关于它的介绍在单独一篇文章介绍。

具体参阅JavaScript toggle() 方法一章节。


鲜花

握手

雷人

路过

鸡蛋
上一篇:JavaScript keyup 事件下一篇:history.go()

最新评论

返回顶部