classList 添加、删除、切换类名

最新推荐文章于 2024-05-30 10:10:30 发布

原创最新推荐文章于 2024-05-30 10:10:30 发布 · 1.2w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript #dom #html5

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

13 篇文章

订阅专栏

CSS

12 篇文章

订阅专栏

JavaScript 事件操作

2 篇文章

订阅专栏

本文详细介绍了如何在JavaScript中使用classList操作DOM元素的类名，包括获取类名列表、添加、移除类，以及一个关于切换页面背景的示例。通过实例展示如何在前端开发中灵活运用类名管理技术。

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>

在这里插入图片描述