使用原生 JavaScript 实现 addClass、removeClass 和 toggleClass 功能的示例

最新推荐文章于 2025-10-25 10:59:23 发布
原创 最新推荐文章于 2025-10-25 10:59:23 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言 #ecmascript #js

js 专栏收录该内容
300 篇文章 ¥59.90 ¥99.00
订阅专栏
本文展示了如何使用原生JavaScript实现addClass、removeClass和toggleClass功能，用于操作HTML元素的类名，以改变样式和实现交互效果。通过示例代码详细解释了每个函数的工作原理和使用方法。

在前端开发中，经常需要操作 HTML 元素的类名来改变样式或实现交互效果。在许多 JavaScript 框架和库中，如 jQuery 和 React，都提供了方便的方法来操作元素的类名。然而，如果你想使用原生的 JavaScript，也可以很容易地实现这些功能。

在本文中，我将向你展示如何使用原生 JavaScript 实现 addClass、removeClass 和 toggleClass 功能。这些功能分别用于向元素添加类名、删除类名和切换类名。

首先，让我们来实现 addClass 函数。该函数将接受两个参数：元素的选择器和要添加的类名。它将查找匹配选择器的所有元素，并为每个元素添加指定的类名。

function addClass(selector, className) {
   
   
  var elements = document
了解本专栏 订阅专栏 解锁全文
使用原生JavaScript实现addClass、removeClass和hasClass函数
ByteZenith的博客
09-21 684
这些函数可以帮助我们动态地添加、删除和检查元素的类名，从而实现样式的修改和控制。在前端开发中，我们经常需要操作DOM元素的类名。这些函数可以帮助我们动态地添加、删除和检查元素的类名，从而实现样式的修改和控制。通过以上代码，我们可以看到addClass函数成功地添加了一个新的类名，hasClass函数返回了true，而removeClass函数成功地将类名移除后，hasClass函数返回了false。实现的思路是先检查元素是否已经有了该类名，如果没有，则将新的类名添加到元素的classList属性中。
用JS封装的通用addClass方法（函数）和removeClass方法（函数）
走在前端
03-20 3809
/* * 函数名：添加class。 * 参数说明：element（必选） 指的是需要添加class的元素(对象); new_name（必选） 指的是需要添加的class名。 * 返回值说明：形参为空则返回false；添加新的class名成功后则返回true。 * 函数作用：为指定的元素添加指定的class名。 */ function addClass(element, new_name)
原生js实现addClass,removeClass和toggleClass
lakenQi
09-25 661
综述 Jquerys实现class的add,remove和toggle是十分方便的。而H5新增的classList方法，也让原生js的各种class操作变得方便起来。然而，兼容性来了，classList只兼容IE10及以上（这里只提IE吧，IE是前端过不去的兼容坎），因此十分想方便的用原生js，又纠结在了兼容性上，干脆，那就自己来实现一下吧，都给它扔进去，兼容的就classList，不兼容的就用...
原生js添加class
weixin_51666715的博客
05-16 3474
原生js添加class classNameLIst.add给dom元素添加class <div ref="img">ig</div> <script> //获取dom节点 let img=document.querySelector('div'); img.classNameList.add("name"); </script>
原生JS实现addclass
Cloud1209的博客
01-17 1137
** 只介绍关键部分代码，可自己尝试应用 ** CSS .class1{ display: none; } HTML <div id="card0"> </div> JS代码 function addClass(ele, str) { if (ele.className) { var oriNam...
原生js实现class的添加和删除简单代码
11-22
实例代码： function hasClass( elements,cName ){ return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); }; function addClass( elements,cName ){ if( !hasClass( elements,cName ) ){ elements.className += " " + cName; }; }; function removeClass( elements,cName ){ if( has
原生js实现addClass、removeClass、toggleClass
u010552788的专栏
03-30 3096
jquery里有添加样的().addClass和移除样式().addClass和移除样式()>removeClass()； 那么如何用原生js实现？function hasClass(obj, cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); }function addClass(obj,
原生js实现增加（addclass）,删除（removeclass）,判断是否存在（hasclass）,如果存在删除，如果不存在添加（toggleclass）和获取类名（getbyclass）的方法
花开，伱不再的博客
09-16 6382
Jquery class
原生js实现addclass,removeclass,toggleclasss实例
10-21
在现代Web开发中，虽然广泛使用了jQuery等库来简化操作，但在不依赖这些库的环境中，我们需要使用原生JavaScript来实现相同的功能。 首先，我们需要了解几个关键的方法： 1. addClass：此方法用于给指定的DOM元素...
javascript自定义的addClass()方法
10-25
主要介绍了javascript自定义的addClass()方法，通过传参就可以实现样式的添加
JS实现一键回顶功能示例代码
12-10
`scrollTo()` 不是原生JavaScript的方法，但在某些库如jQuery或自定义脚本中可能会被使用，它用于滚动到指定的页面坐标。例如，`window.scrollTo(xpos, ypos)` 将窗口的左上角移动到指定的x和y坐标。 下面是一个...
class+removeClass实现toggleClass的效果
04-19
用户可能是在没有jQuery的情况下，用原生JavaScript来实现类似的功能。首先，我得回忆一下toggleClass的功能：当元素有某个类时，移除它；没有的话，添加它。 根据引用[1]中的说明，toggleClass会根据类是否存在来...
37、jQuery 与原生 JavaScript 功能对比及实现
最新发布
7h6j5k4l3的博客
10-25 26
本文详细对比了jQuery与原生JavaScript在事件绑定、元素迭代、类操作、样式与属性读写、内容操作、元素替换与移除等常见前端功能上的实现方式，提供了两者对应的代码示例和使用场景分析。文章还探讨了在不同项目规模、浏览器兼容性和性能要求下如何选择合适的技术方案，并推荐了辅助资源如'You Might Not Need jQuery'网站。通过总结与流程图，帮助开发者提升开发效率与项目性能。
【原生js】动态添加class
jieweiwujie的博客
11-06 1万+
1.添加类名： document.getElementById("myDiv").classList.add('mystyle'); 2.删除类名： document.getElementById("myDiv").classList.remove('mystyle'); 3.检查是否含有某个css类： myDiv.classList.contains('myCssClass'); //return true or flase; 注意：类名直接写，不可面“.”; 　　　如若同时添加多个
原生js实现添加和删除class
weixin_44727080的博客
09-24 6566
前言： 对于习惯jquery的写法以后对于原生总是不适应，实际原生中也是有直接简单的方法的。 1、添加class 添加：节点.classList.add("类名")； 2、删除class 删除：节点.classList.remove("类名")； 具体使用： document.getElementById('show_one').style.display = 'block' document.getElementById('show_two').style.display ...
原生js添加类名
热门推荐
前端指南
01-18 5万+
     动态添加class类名在前端开发过程中是很常见得做法，比如说在实现轮播图的时候给当前图片的锚点添加一个active类,有又或者在实现动画的时候添加一个终态css类。     当然，有很多js库中封装了添加类名的方法，典型的比如jquery中的addClass()方法。但是，在实际开发中，如果页面比较简单，逻辑功能不是特别复杂的时候。还是推荐用原生的js来实现这些功能，这样能够有效的提升...
转：原生JS实现addClass,removeClass,toggleClass
12-28 445
原文地址：http://blog.youkuaiyun.com/lowkeysk/article/details/8063816 分类： js/jquery2012-10-12 11:25 285人阅读 评论(0) 收藏 举报 jQuery操作class的方式非常强大，但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元
JS原生addClass、removeClass实现
weixin_30516243的博客
10-23 358
用jQuery的addClass（）、removeClass（）时手痒，想了解下原生JavaScript是怎么实现的这类功能。 方法一：还是用到了其他函数辅助，所以看着简短些。 function addClass(ele,classname){ ele.className += " " + classname;// }; function remov...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值