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>
<!-- 全局使用使用querySelector 获取Dom元素-->
<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>

HTML5中获取类样式的方法

HTML5中获取类样式的方法

猜你喜欢