原生JS添加Class类名 删除类名
2年前
超过737天
温馨提示
本文最后更新于2022年11月15日，已超过737天没有更新，若内容或图片失效，请留言反馈。
原生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里的链接起来，css则是通过。这样做的目的是为了让内容-样式-逻辑分离，以便以后能够更好地维护。
0 赞
or 打赏
喜欢就打赏一点
上一篇
