lovecoding
/
W250511


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* #box{
            width: 200px;
            height: 200px;
            background-color: red;
            color: #fff;
            font-size: 20px;
            text-align: center;
            line-height: 200px;
        } */

        .active{
            width: 200px;
            height: 200px;
            background-color: red;
            color: #fff;
            font-size: 20px;
            text-align: center;
            line-height: 200px;
        }
        .div1{
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="box" class="div1">
        hello world
    </div>
    <button id="add-btn">添加类名</button>
    <button id="remove-btn">删除类名</button>
    <script>
        var oBox = document.getElementById("box");
        var addBtn = document.getElementById("add-btn");
        var removeBtn = document.getElementById("remove-btn");
        // 通过js控制类名

        addBtn.onclick = function(){
            // className 可以控制标签的class 的值 只能实现覆盖效果
            // 设置标签的类名 通过className 赋值是一个覆盖 覆盖原有class 里面的值
            // oBox.className = "active";
            // 获取标签的类名
            // console.log(oBox.className);

            // 在原有类名基础上新增类名
            // 利用字符串拼接实现
            // oBox.className = oBox.className + " active";
            // 利用classList 实现 新增类名 在class 最后新增一个类名
            oBox.classList.add("active");

        }

        removeBtn.onclick = function(){
            // 利用classList 实现 删除类名
            oBox.classList.remove("active");
        }

        // oBox.style.color = "red";
        // oBox.styel.width = "200px";
        // .
        // .
        // .
        // .
    </script>
</body>
</html>