JavaScript 给html标签添加,追加,移除 一个或多个CSS样式

首次发布:2021-12-30 11:27
以下是核心代码
<style>
    .test1 {
        border: 1px solid;
    }
    .test2 {
        font-size: 50px;
    }
    .test3 {
        background-color: blue;
    }
</style>
<div class="test1" id="div1">
    罗分明博客 www.luofenming.com
</div>
<script>
   //转载请保留:http://www.luofenming.com/show.aspx?id=ART2021123000001
    let div = document.getElementById("div1");
    //这样会把div1 原来的test1样式覆盖,只有test2
    div.setAttribute("class", "test2");
    //这样是在原来的基础上追加 test2和test3 最后会同时有test1,test2,test3样式
    div.classList.add("test2", "test3");


    //移除test1样式
    div.classList.remove("test1");

    //同时移除多个样式 test1,test2
    div.classList.remove("test1", "test2");

    //判断是否包含 test1样式
    div.classList.contains("test1"); //return true or false
</script>