classList 添加、删除、切换类名

最新推荐文章于 2024-06-26 08:18:42 发布

夜☞

最新推荐文章于 2024-06-26 08:18:42 发布

阅读量1.2w

点赞数 2

分类专栏： CSS JavaScript DOM操作元素及实例 JavaScript 事件操作文章标签： js javascript dom html5

本文链接：https://blog.csdn.net/qq_41853417/article/details/109245877

版权

JavaScript DOM操作元素及实例同时被 3 个专栏收录

13 篇文章 0 订阅

订阅专栏

CSS

12 篇文章 0 订阅

订阅专栏

JavaScript 事件操作

2 篇文章 0 订阅

订阅专栏

classList 返回元素得类名

<div class="one two"></div>
<script>
	window.addEventListener('load', function() {
	var div= document.querySelector('div');
		console.log(div.classList)
		console.log(div.classList[0])
	})
</script>

在这里插入图片描述

<div class="one two"></div>
<script>
	window.addEventListener('load', function() {
	var div= document.querySelector('div');
		console.log(div.classList[0])
	})
</script>

在这里插入图片描述

<div class="one two"></div>
<script>
	window.addEventListener('load', function() {
	var div= document.querySelector('div');
		div.classList.add('three')
	})
</script>

在这里插入图片描述

<div class="one two"></div>
<script>
	window.addEventListener('load', function() {
	var div= document.querySelector('div');
		div.classList.remove('one')
	})
</script>

在这里插入图片描述

	<div class="one two"></div>
    <button>开关灯</button>

<script>
	window.addEventListener('load', function() {
			var div= document.querySelector('div');
		    var btn = document.querySelector('button')
            btn.addEventListener('click', function() {
                document.body.classList.toggle('bg')
            })
	})
</script>