专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

原生前端之样式类的操作---classList

ins518 2024-09-29 18:37:30 技术文章 200 ℃ 0 评论

操作自己DOM元素的样式可以使用className和classList两种方式 进行操作。className返回的是一个此元素包含的样式类的字符串以空格符间隔，classList返回的是一个数组。这里我们主要讲解classList的使用。



classList包含5种方法：

add：添加类

contains：是否包含此类

remove:删除此类

replace：进行类的替换

toggle：交替使某个类存在或不存在

话不多说上例子

<!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>

整个程序包含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样式类,即不会出现设置重复的样式。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表