HTML5新增ClassList是什么(ClassList属性的方法)
1、HTML5新增classlist是什么？
HTML5中新增了ClassList属性，用于实现对class的操作，ClassList属性返回元素的类名，作为DOMTokenList对象，该属性用于在元素中添加，移除及切换CSS类。ClassList属性是只读的，但你可以使用add()和remove()方法修改它。操作自己DOM元素的样式可以使用className和classList两种方式 进行操作。className返回的是一个此元素包含的样式类的字符串以空格符间隔，ClassList返回的是一个数组。这里我们主要讲解ClassList的使用。
2、ClassList属性有以下几种方法:
(1)通过ClassList可以获取元素的全部类名;
(2)通过ClassList.remove()可以删除元素的一个或多个类名;
(3)通过ClassList.add()可以向元素添加一个或多个类名;
(4)通过ClassList.lentgh可以获取到元素类名的数量;
(5)通过ClassList.item(x)可以获取到元素类名索引为x的类名;
(6)通过ClassList.toggle可以为元素切换类;
(7)通过ClassList.contains(x)查看元素是否存在类名为"x"的类;
3、ClassList属性使用实例代码如下：
<!DOCTYPE html>
<html>
<head>
<title>设置元素的类</title>
<meta charset="utf-8">
<style>
.blue{
color: blue;
}
.red{
color: red;
}
.font{
font-size: 19px;
}
</style>
</head>
<body>
<div>
<p id="data">hahahahahah</p>
<p id="info"></p>
<div>
<input type="button" value="显示红字" onclick="red()">
<input type="button" value="toggle字体大小" onclick="fontsize()">
<input type="button" value="将红字换为蓝字" onclick="replace()">
<input type="button" value="清除蓝字"onclick="remove()">
</div>
</div>
<script>
var dim = document.getElementById("data").classList;
var info=document.getElementById("info");
function red()
{
if(!dim.contains("red"))
{
dim.add("red");
}
display();
}
function fontsize()
{
dim.toggle("font");
display();
}
function replace()
{
dim.replace("red","blue");
display();
}
function remove()
{
dim.remove("blue");
display();
}
function display()
{
info.innerHTML=document.getElementById("data").className;
}
display();
</script>
</body>
</html>
4、实例说明
整个程序包含3个样式类red显示前景色为红色，blue显示前景色为蓝色，font设置字大小为19像素。
id为data的标签为控制样式的标签，id为info的标签为显示标签为data的标签的className值。
显示红字按钮为id为data的标签添加red样式，
显示为toggle字体大小的标签为id为data的标签交替变换是否有font样式
显示为将红字换为蓝字的按钮为id为data的标签中的red样式替换为blue样式
显示为清除蓝字的按钮为id删除data的标签中的blue样式
通过点击上述按钮可以展示不同的效果。
可以看出对一个DOM元素添加多个样式类时，如果样式类有重叠的属性，后面的样式类的属性将会覆盖前面样式类的属性。
当DOM元素具有blue样式同时具有red样式时再做将红字换为蓝字的操作时不会出现具有两个blue样式类,即不会出现设置重复的样式。
原文地址：https://tangjiusheng.com/html5/810.html
赣公网安备36072102000190