【日期】
2022/02/17
【问题】
JavaScript动态添加CSS的class类样式不生效.
【效果图】没有效果
【代码图】
【原因】
css样式优先级在加载css文件的时候就确定下来的. 最后一个是加载优先级最高。
【如何发现】
在测试的时候发现，并且一开始以为是class里添加类名的顺序会影响。后来发现是加载顺序的影响。
【如何修复】
只需把css样式里的class类样式的顺序换一下（tip：如果是加载外部css，也是加载顺序）
之前的
换一下位置
【效果图】
生效了
【完整代码】
<!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>
【总结】
细节很重要.
文章小尾巴
文章写作、模板、文章小尾巴可参考：《写作“小心思”》
感谢你看到最后，最后再说两点~
①如果你持有不同的看法，欢迎你在文章下方进行留言、评论。
②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~
（文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。）
