原生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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。