js 点击添加和去除类名 element.classList.toggle（‘class‘）

已于 2022-11-25 08:44:09 修改
阅读量885 收藏 1
点赞数 1
分类专栏： 前端 文章标签： javascript 前端 html
于 2022-11-17 10:42:47 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_70020706/article/details/127899175
版权 
<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style type="text/css">
			:root {
				--bg: #638ac5;
				--bg_1:#ff3161;
			}

			.hard {
				width: 90px;
				height: 200px;
				background: var(--bg);
				transition: 0.5s;
			}
			.cor {
				background:var(--bg_1);
			}
		</style>
	</head>
	<body>
		<div class="hard">点击改变背景颜色</div>
		<script>
			let hard = document.querySelector(".hard");
			//hard 点击时触发
			hard.onclick = function() {
				//.classList.toggle(class) 类名存在就消除 不存在就添加class
				hard.classList.toggle('cor');
			}
			
		</script>
	</body>
</html>

我的派蒙爱吃草
关注
专栏目录
js实现点击元素添加class并删除其他同级元素class
Stu222223的博客
07-28 2656
$(".brand li").click(function(){ $(this).find("a").addClass("current"); $(this).siblings().find("a").removeClass("current"); // .siblings() 返回被选元素的所有同级元素（其余）。 }); });
classList属性配合内置方法add()、remove()、toggle()，添加或删除某个类，以此改变CSS样式
Julienling的博客
04-04 2589
改变某HTML元素样式，有多种方法，各有优缺。推荐方法二：通过添加或切换元素的类来改变其样式。 方法一：改变内联样式 优点： 不需要考虑兼容性； 代码量少； 缺点： 每执行一句element.style.styleName = " ";，都会重新进行一次整个页面的渲染，在网络拥堵的情况下效果巨差，不符合异步更新策略。因此不推荐使用。 <style> .b1{ width:100px; height:100px; backgr
用js写点击事件实现类名添加
qq_38215042的博客
01-15 5858
实现原理：其实就是点击的时候把高变为auto 自适应，点击的时候下面的 height: auto;会覆盖上面的 height: 0.8rem; 实现效果: 未点击 点击： test.html &lt;section&gt; &lt;!-- 全部 --&gt; &lt;div class="main"&gt; ...
js添加类className和classList
Pzg3240432140的博客
07-18 513
当使用classList添加类名时，标签可以同时使用该类，如果两个类中有相同的属性时当前类会替换掉之前类的属性。当使用className添加类名时，标签存在其他类时会覆盖掉之前的类名。
Js操作添加class和移除class
小马总的博客
11-13 9130
 这种代码通常在类似tab选择的那种 拥有select的就是选中的状态 应用的场景还是很多的    $(".commodity").click(function(){ if($(this).hasClass("select")){ $(this).removeClass(" select") ; }else{ $(this).addClass(...
js给元素添加类的方法
qq_43654065的博客
12-22 442
转载： js中给元素添加类的方法_liushilin的we-CSDN博客_js给元素添加类名一.原生js中添加类的方法1.为 &lt;div&gt; 元素添加一个类:document.getElementById("div").classList.add("类名");2.为 &lt;div&gt; 元素添加多个类:document.getElementById("div").classList.add("类名1","类名2","类名3",https://blog.csdn.
详解用JS添加和删除class类名
12-08
本文将详细讲解如何使用JavaScript的`classList`属性来添加和删除class类名，并结合一个tab切换的实例来阐述其应用。 `classList`属性是HTML5引入的一个方便的API，它允许我们直接操作元素的类名集合，而无需使用...
前端项目-classlist.zip
09-03
`classlist.zip`文件中的`classList.js-master`项目提供了一个跨浏览器的`Element.classList`实现，旨在解决老旧浏览器不支持原生`classList`属性的问题。 `Element.classList`是一个DOM接口，首次在HTML5规范中被...
原生js实现class的添加和删除简单代码
10-21
在JavaScript中，操作DOM元素的CSS类（class）是常见的需求，这...虽然ES6引入了`classList`接口，提供了更便捷的操作方式，如`.add()`, `.remove()`和`.toggle()`，但在不支持ES6的环境中，这些原生实现依然非常实用。
DOM基础，classList属性提供的方法和属性，DOM中节点的操作，追加节点
m0_73849466的博客
10-31 1119
DOM基础概念，classList属性提供的方法和属性的种类，DOM中节点的操作的方式，追加节点的方式和方法
a标签跳转到指定div,jquery添加和移除class属性的实现方法
10-21
下面小编就为大家带来一篇a标签跳转到指定div,jquery添加和移除class属性的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Js 和 Jq 添加类、删除类 和 切换类
weixin_52306994的博客
03-11 1003
setAttribute()方法是创建或者改变元素的某个属性el.setAttribute("class","classname")不仅可以使用classList.toggle()方法在修改切换类，也可以使用setAttribute()方法。看了这些，小伙伴是不是有这样的疑惑呢？怎样才能兼容所有浏览器呢。$(当前对象). addClass("类名")
javascript 动态添加dom元素，添加类名，添加自定义属性，添加点击事件，
weixin_57666779的博客
07-16 1707
【代码】javascript 动态添加dom元素，添加类名，添加自定义属性，添加点击事件，
JS基础篇--HTML DOM classList 属性
weixin_34234829的博客
02-11 143
页面DOM里的每个节点上都有一个classList对象，程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList，程序员还可以用它来判断某个节点是否被赋予了某个CSS类。 添加类（add） document.getElementById("myDIV").classList.add("mystyle"); 为 &lt;div&gt; 元素添加多个类: d...
vue中点击添加类名，并且实现升降序
最新发布
m0_62785037的博客
08-07 707
vue中点击综合元素和价格元素添加类名，并且实现升降序icon。
JS（ie10以上/移动端）用classList.toggle做开关灯效果
weixin_72322475的博客
09-18 919
JS（ie10以上/移动端）用classList.toggle做开关灯效果
IE 10以前的版本兼容 document element 的classList
farawayplace613的专栏
09-07 5092
本文讲述如何让　IE 10以前的版本兼容 document element 的classList。
JavaScript第 21 篇，JavaScript中的classList.toggle()方法和CSS自定义属性var，使用详细（css中var变量怎么应用）
weixin_65793170的博客
06-25 3846
⭐CSS变量（也称为自定义属性）引入了一种在CSS中定义和使用可重用值的方法。这些变量可以用来存储颜色、尺寸等常量，从而在整个样式表中保持一致性和易于维护的特点。通过使用var()函数，我们可以轻松地在多个地方引用同一个值，减少了重复代码，并且可以在一处修改后自动更新所有引用该变量的地方。 而JavaScript的classList.toggle() 方法提供了一种简洁的方式来添加或移除元素的类名。这个方法特别适用于那些需要频繁切换状态的情况，比如激活按钮、显示隐藏内容或是切换主题模式。通过简单的调用，即
JS动态添加样式类名
Adios_0403的博客
07-19 2291
/ 添加box类，但由于本身也有一个nav类，使用空格隔开可以一起添加，不会导致样式被删除。// 2 contains() 有就返回 ture，没有就返回 false。// 2. 切换类 toggle() 有还是没有 有就删掉，没有就加上。// 2. 删除类 remove() 类名不加点，并且是字符串。// 2 追加类 add() 类名不加点，并且是字符串。// 通过 classList 添加。// 通过 classList 添加。// 通过 classList 添加。// 1. 获取元素。
classList.toggle（）
06-07
classList.toggle() 是用于在元素的 class 列表中切换指定类名的方法。如果元素中包含该类名，则该方法会删除该类名并返回 false，否则会添加该类名并返回 true。例如，以下代码将在元素的 class 列表中添加或删除名为 "active" 的类名： ``` var element = document.getElementById("myElement"); element.classList.toggle("active"); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值