原生JS给元素添加class属性 - 范仁义

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

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

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

1、JS放在body与head中的不同？

解析的时间不同，放在head里面先被解析，这样body还没有解析，所以$(#btn)会返回空值。

如果把javascript放在head里的话，则先被解析,但这时候body还没有解析，所以$(#btn)会返回空值。如果把javascript放在head里的话，一般都会绑定一个监听，当全部的html文档解析完之后，再执行代码：
$(document).ready(function(){
//这里放入执行代码
})

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

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

有下面这三种简单语句。

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

<!DOCTYPE html>
        <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>

</ 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>。这样做的目的是为了让内容-样式-逻辑分离，以便以后能够更好地维护。

我的旨在学过的东西不再忘记（主要使用艾宾浩斯遗忘曲线算法及其它智能学习复习算法）的偏公益性质的完全免费的编程视频学习网站：【读书编程笔记】fanrenyi.com ；有各种前端、后端、算法、大数据、人工智能等课程。版权申明：欢迎转载，但请注明出处

一些博文中有一些参考内容因时间久远找不到来源了没有注明，如果侵权请联系我删除。