原生JS添加Class类名删除类名

原创

用户1349575

修改于 2022-01-25 14:54:23

8.8K00

代码可运行

文章被收录于专栏：编程社区编程社区

运行总次数：0

代码可运行

原生JS添加类名删除类名

为 div>元素添加 class:

document.getElementById("myDIV").classList.add("mystyle");

为 div 元素添加多个类:

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

为 div元素移除一个类:

document.getElementById("myDIV").classList.remove("mystyle");

为 div 元素移除多个类:

document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

检查是否含有某个CSS类

myDiv.classList.contains('myCssClass'); //return true or false

另一种给元素添加class属性

document.getElementsByTagName('body')[0].className = 'snow-container'; //设置为新的
document.getElementsByTagName('body')[0].className += 'snow-container'; //在原来的后面加这个
document.getElementsByTagName('body')[0].classList.add("snow-container"); //与第一个等价

测试一:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .snow-container {
                background-color: red;
            }
        </style>
        <script type="text/javascript">
            window.onload = function() {
                document.getElementsByTagName('body')[0].className = 'snow-container'; //设置为新的
                document.getElementsByTagName('body')[0].className += 'snow-container'; //在原来的后面加这个
                document.getElementsByTagName('body')[0].classList.add("snow-container"); //与第一个等价
            }
        </script>
    </head>

    <body class="test">

    </body>

</html>

测试二:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .snow-container {
                background-color: red;
            }
        </style>
        
    </head>

    <body class="test">

    </body>
    <script type="text/javascript">
        document.getElementsByTagName('body')[0].className = 'snow-container'; //设置为新的
        document.getElementsByTagName('body')[0].className += 'snow-container'; //在原来的后面加这个
        document.getElementsByTagName('body')[0].classList.add("snow-container"); //与第一个等价
    </script>

</html>

小结:JS放在body与head中的不同

放在body和head其实差不多的，只不过是文档解析的时间不同。浏览器解析html是从上到下的。如果把javascript放在head里的话，则先被解析,但这时候body还没有解析，所以$(#btn)会返回空值。如果把javascript放在head里的话，一般都会绑定一个监听，当全部的html文档解析完之后，再执行代码：

$(document).ready(function(){
//这里放入执行代码
})

一般情况下最好是单独把javascript放在js文件里，通过head里的<script src="file.js"></script>链接起来，css则是通过<link>。这样做的目的是为了让内容-样式-逻辑分离，以便以后能够更好地维护。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

javascript

登录后参与评论

0 条评论

热度