使用原生JavaScript实现addClass、removeClass和hasClass函数

最新推荐文章于 2023-12-29 16:58:34 发布
最新推荐文章于 2023-12-29 16:58:34 发布
阅读量593 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 开发语言 ecmascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ByteZenith/article/details/133136906
js 专栏收录该内容
440 篇文章 ¥59.90 ¥99.00
订阅专栏
本文介绍了如何使用原生JavaScript实现addClass、removeClass和hasClass这三个类名操作函数，以方便动态添加、删除和检查DOM元素的类名，从而控制样式。详细阐述了每个函数的实现思路，并提供示例代码进行演示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在前端开发中，我们经常需要操作DOM元素的类名。为了方便操作，可以使用原生JavaScript实现一些常用的类名操作函数，比如addClass、removeClass和hasClass。这些函数可以帮助我们动态地添加、删除和检查元素的类名，从而实现样式的修改和控制。

下面我将为你展示如何使用原生JavaScript实现这些函数。

首先，我们来实现addClass函数。这个函数用于给指定的元素添加一个类名。实现的思路是先检查元素是否已经有了该类名，如果没有，则将新的类名添加到元素的classList属性中。

function addClass(element, className) {
   
   
  if (!hasClass
了解本专栏 订阅专栏 解锁全文
使用原生 JavaScript 实现 addClass、removeClass 和 toggleClass 功能的示例
CgbAutoit的博客
10-02 967
它将查找匹配选择器的所有元素，并为每个元素切换指定的类名，即如果元素有该类名，则删除它；它将查找匹配选择器的所有元素，并为每个元素切换指定的类名，即如果元素有该类名，则删除它；与 addClass 函数类似，removeClass 函数也接受两个参数：元素的选择器和要删除的类名。与 addClass 函数类似，removeClass 函数也接受两个参数：元素的选择器和要删除的类名。你可以在你的项目中使用这些函数来动态修改元素的类名，以实现各种样式和交互效果。首先，让我们来实现 addClass 函数。
原生javascript实现addClass,removeClass,hasClass函数
10-22
在原生JavaScript编程中，操作DOM元素的类（class）是日常开发中频繁进行的操作，这包括添加类（addClass）、删除类（removeClass）以及检查元素是否含有特定的类（hasClass）。虽然在现代Web开发中，经常使用jQuery...
原生js实现addClass,removeClass,hasClass方法
LeapMotion1的博客
12-15 2071
1.hasClass()//判断某个类是否存在 function hasClass(element, value) { var cls = value || ''; //\s 匹配任何空白字符，包括空格、制表符、换页符等等 if (cls.replace(/\s/g, '').length == 0) { return false; //当没有参数返回时，
原生js添加class
weixin_34315485的博客
08-17 148
functionhasClass(obj,cls){ returnobj.className.match(newRegExp('(\\s|^)'+cls+'(\\s|$)')); } functionaddClass(obj,cls){ if(!this.hasClass(obj,cls))obj.className...
原生JS实现addclass
Cloud1209的博客
01-17 1110
** 只介绍关键部分代码，可自己尝试应用 ** CSS .class1{ display: none; } HTML <div id="card0"> </div> JS代码 function addClass(ele, str) { if (ele.className) { var oriNam...
原生addClass 方法 添加类函数
weixin_30449239的博客
01-26 235
function addClass(id,new_class){ var i,n=0; new_class=new_class.split(","); for(i=0;i<new_class.length;i++){ if((" "+document.getElementById(id).className+" ").indexOf("...
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
10-25
在这篇文章中，介绍了如何使用原生JavaScript（JS）代码来模拟jQuery库中的几个常用的类操作函数，即addClass、removeClass和hasClass。这些函数被广泛用于在DOM操作中动态地修改HTML元素的class属性。接下来，我们...
js实现addClass,removeClass,hasClass的函数代码
10-28
在JavaScript中，`addClass`, `removeClass`, 和 `hasClass` 是三种常见的操作DOM元素类名（className）的方法。这些方法在创建交互式用户界面时非常有用，例如改变元素样式、响应事件或实现动画效果。让我们详细...
原生js动态添加/删除class属性值
最新发布
开发微信：18189510554
12-29 1383
【代码】原生js动态添加/删除class属性值。
JS原生addClass、removeClass实现
weixin_30516243的博客
10-23 343
用jQuery的addClass（）、removeClass（）时手痒，想了解下原生JavaScript是怎么实现的这类功能。 方法一：还是用到了其他函数辅助，所以看着简短些。 function addClass(ele,classname){ ele.className += " " + classname;// }; function remov...
原生js实现增加（addclass）,删除（removeclass）,判断是否存在（hasclass）,如果存在删除，如果不存在添加（toggleclass）和获取类名（getbyclass）的方法
花开，伱不再的博客
09-16 6346
Jquery class
js函数-追加新的class属性addClass()函数
Antg的博客
04-10 3701
一、代码如下 function(element,value){ if(!element.className){ element.className = value; }else{ newClassName = element.className; newClassName += " "; newClassName += value; element.className +=...
原生javascript实现addClass和removeClass
aitcax的专栏
11-19 3777
addClass()和removeClass()是jQuery提供的功能。 用法： $(selector).addClass(classname);和$(selector).removeClass(classname);在大多数情况下，使用jquery的选择器选择的元素是可以使用这两个方法来追加和删除class属性的，但是有一些特殊情况，不是通过$()选择器及jQuery其他方法（比如paren
javascript添加addClass()方法
一路前行
12-05 1万+
//element:需要添加新样式的元素，value：新的样式 function addClass(element, value) {    if (!element.className) {        element.className = value;    } else {        newClassName = element.className;        newClas...
原生js动态添加class
热门推荐
guoyinshuai的博客
03-14 1万+
在点击切换的过程中，我们需要给被选中的子选项添加“active”，然后让其它子选项删除“active”名。 该怎么做呢？ 首先，通过JS取到所有tab的节点 var arr = document.getElementsByClassName("tab_item"); 然后只需在被选中的子节点加上.classList.add("类名")，比如： arr[i].classList.add...
.addClass() 与 .removeClass()
Xiaoming's Blog
12-30 1544
.addClass()方法 当一个元素含有多个class时，DOM元素响应的className属性获取的不是class名称的数组，而是一个含有空格的字符串，这就使得多class操作变得很麻烦。同样的jQuery开发者也考虑到这种情况，增加了一个.addClass()方法，用于动态增加class类名。具体有2种用法： .addClass( className ) : 为匹配的元素
新手参考：模仿jQuery打造个人JavaScript框架
这一过程会涉及到学习和理解jQuery的核心设计理念和实现方式，然后尝试用自己的方式去重写或者模拟这些功能。 ### 描述分析 描述提到，“仿照着jquery写了自己的框架，供新手参考”，说明该框架的目的是教育性的，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值