html怎么添加class属性值,原生JS给元素添加class属性(转QiaoZhi)

有下面这三种简单语句。

document.getElementsByTagName('body')[0].className = 'snow-container'; //设置为新的

document.getElementsByTagName('body')[0].className += 'snow-container'; //在原来的后面加这个

document.getElementsByTagName('body')[0].classList.add("snow-container"); //与第一个等价

测试一:

.snow-container {

background-color: red;

}

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"); //与第一个等价

}

测试二:

.snow-container {

background-color: red;

}

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中的不同

放在body和head其实差不多的，只不过是文档解析的时间不同。浏览器解析html是从上到下的。

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

$(document).ready(function(){

//这里放入执行代码

})

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

html怎么添加class属性值,原生JS给元素添加class属性(转QiaoZhi)相关推荐

js中给html元素追加属性,JS为元素添加自定义属性
JS 除了可以操作 HTML 元素现有的属性外,还可以对 HTML 元素自定义属性以及对这些自定义的属性进行读.写操作.JS 可以为任何 HTML 元素自定义任意的属性(属性名必须符合标识符规范). ...
原生js清空上一个元素内容_原生JS实现动态添加新元素、删除元素方法
1. 添加新元素动态添加新元素 Coffee Tea Coffee Tea var child = document.getElementsByClassName("child" ...
js原生后代选择器_JavaScript DOM查询，原生js实现元素子节点的获取
每个网页都是一个dom树,网页中所有的内容都是这个树上的一个节点.JavaScript的工作就是操作这些节点,对节点进行查增删改操作,或是给节点绑定事件. 网页 dom树要操作dom节点,首先要获取 ...
原生js操作元素类名—classList.add()、classList.remove()、classList.contains()、classList.toggle()
原生js操作元素类名 classList.add( newClassName ): classList.toggle( className ): classList.remove( oldClassN ...
原生js获取元素高度
原生js获取元素高度 <div id='container'></div> let dom = document.getElementById('contanier')dom. ...
原生js 给动态添加的元素添加（事件监听器）
原生js (事件监听)和(动态添加元素) 给动态添加的元素添加点击事件 <!DOCTYPE html> <html><head><meta charset=& ...
原生js实现购物车添加删除商品、计算价格功能
购物车功能需求: 根据数据创建购物车内容: 实现购物车添加商品功能: 实现购物车商品数量的增加.减少: 实现购物车商品的删除功能: 购物车的全选功能: 无货商品不可修改数量.不计入总价: 底部计算总 ...
js基础总结——js 获取元素节点、js 绑定onclick事件、js 获取属性修改属性值、js 获取子元素、js 改变css样式
参考书籍:<JavaScript DOM编程艺术第2版> 本博客代码的测试页面是:https://www.layui.com/ js dom操作 js 获取元素节点一份document ...
原生js删除html,原生js操作dom添加删除替换class
1.比较传统的方法 var classVal = document.getElementById("id").getAttribute("class"); // ...

html怎么添加class属性值,原生JS给元素添加class属性(转QiaoZhi)

html怎么添加class属性值,原生JS给元素添加class属性(转QiaoZhi)相关推荐

最新文章

热门文章