原生JS给元素添加class属性

时间 2020-06-09

原文原文链接

原生JS给元素添加class属性

1、总结

一句话总结：

直接操做className属性，具体操做有 = 或者 +=

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

一、JS放在body与head中的不一样？

解析的时间不一样，放在head里面先被解析，这样body尚未解析，因此$(#btn)会返回空值。

若是把javascript放在head里的话，则先被解析,但这时候body尚未解析，因此$(#btn)会返回空值。若是把javascript放在head里的话，通常都会绑定一个监听，当所有的html文档解析完以后，再执行代码：
$(document).ready(function(){
//这里放入执行代码
})javascript

2、原生JS给元素添加class属性

转自或参考：原生JS给元素添加class属性
https://www.cnblogs.com/qlqwjy/p/7283628.htmlcss

有下面这三种简单语句。html

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

测试一:java

<!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>。这样作的目的是为了让内容-样式-逻辑分离，以便之后可以更好地维护。spa