HTML5新增ClassList是什么(ClassList属性的方法)

 分类:html5教程时间:2022-09-16点击:

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样式类,即不会出现设置重复的样式。

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: