HTML5中获取类样式的方法

太过爱你忘了你带给我的痛 2022-01-25 22:47 344阅读 0赞

## HTML5中获取类样式的方法 ##

1.注意：classList :当前元素的所有样式列表—数组

1：添加样式：classList.add() ; add 为元素添加指定名称元素的样式–一次只能添加一个样式

2：移除样式：remove: 为元素移除指定名称的样式（属性还在，样式移除）–一次只能移除一个

3：替换样式：toggle:切换元素样式：如果元素之前没有指定名称的样式；就添加一个。如果元素之前有指定名称的样式；就移除。

4：判断某个元素是否包含指定名称样式： contains:判断元素是否包含指定名称的样式，返回true/false

**怕不是很明白，所以特地做了一个小案例，相信看了有所明白：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>XPR</title>
        <style>
            .a{
                color: red;
            }
            .b{
                color: blueviolet;
            }
            .c{
                color: #ff9d76;
            }
            .d{
                text-decoration: underline;
            }
        </style>
    </head>
    
    <body>
    
    <ul>
        <li>JAVA</li>
        <li class="two">C++</li>
        <li class="three">PHP</li>
        <li class="fous">HTML</li>
    </ul>
    
    <input type="button" value="为第一个元素添加样式" id="add">
    <input type="button" value="为第二个元素移除样式" id="remove">
    <input type="button" value="为第三个元素替换样式" id="toggle">
    <input type="button" value="判断地四个元素是否包含某个样式" id="contains">
    
    <script>
        window.onload=function () {
            //给第一个按钮添加事件
            //querySelector  获取单个元素，如果获取的元素不止一个，那么只会返回满足条件的第一个元素
            // 使用querySelector 通过id 获取第一个按钮
            document.querySelector("#add").onclick=function () {
    
                //通过querySelector获取li元素（满足条件的第一个）
                //classList :当前元素的所有样式列表---数组
                //add 为元素添加指定名称元素的样式--一次只能添加一个样式
                document.querySelector("li").classList.add("a");
            }
    
        // 给第二个按钮添加事件
            document.querySelector("#remove").onclick=function () {
                //remove: 为元素移除指定名称的样式（属性还在，样式移除）--一次只能移除一个
                //querySelector:通过类选择器获取指定名称的元素
                document.querySelector(".two").classList.remove("b")
            }
    
        //  给第三个按钮添加事件
             document.querySelector("#toggle").onclick=function () {
               //toggle:切换元素样式：如果元素之前没有指定名称的样式；就添加一个。如果元素之前有指定名称的样式；就移除。
                document.querySelector(".three").classList.toggle("c")
            }
            //给第四个按钮添加事件
            document.querySelector("#contains").onclick=function () {
            //    contains:判断元素是否包含指定名称的样式，返回true/false
                var xx=document.querySelector(".fous").classList.contains("d")
            //    打印结果
                console.log(xx);
            }
        }
    </script>
    </body>
    </html>