【日期】

2022/02/17

【问题】

JavaScript动态添加CSS的class类样式不生效.
【效果图】没有效果不生效.gif 【代码图】

【原因】

css样式优先级在加载css文件的时候就确定下来的. 最后一个是加载优先级最高。

【如何发现】

在测试的时候发现，并且一开始以为是class里添加类名的顺序会影响。后来发现是加载顺序的影响。

【如何修复】

只需把css样式里的class类样式的顺序换一下（tip：如果是加载外部css，也是加载顺序）
之前的换一下位置

【效果图】

生效了生效.gif

【完整代码】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css样式优先级在加载css文件的时候就确定下来的</title>
</head>

<body>
    <center>
        <div>
            <div id="nfzDiv" class="nfz-p div-p">你好，南方者。</div>
            <button onclick="addClass()">添加class</button>
            <button onclick="removeClass()">去掉class</button>
        </div>
        <br>
    </center>
</body>
<style type="text/css">
    .div-p {
        margin: 10px;
        font-size: small;
        color: red;
    }
    .nfz-p {
        color: #4690bb;
        font-size: large;
    }
</style>
<script type="text/javascript">
    var nfzDiv = document.getElementById("nfzDiv");

    function addClass() {
        nfzDiv.classList.add("nfz-p");
    }

    function removeClass() {
        nfzDiv.classList.remove("nfz-p");
    }
</script>

</html>

【总结】

细节很重要.

文章小尾巴

文章写作、模板、文章小尾巴可参考：《写作“小心思”》
　　感谢你看到最后，最后再说两点~
　　①如果你持有不同的看法，欢迎你在文章下方进行留言、评论。
　　②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~
　　我是南方者，一个热爱计算机更热爱祖国的南方人。

　　（文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。）

【BUG】【CSS】【JS】JavaScript动态添加CSS的class类样式不生效，原因是css样式优先级在加载css文件的时候就确定下来的.