DOM之class中添加或移除选择器

最新推荐文章于 2022-12-12 13:55:55 发布
最新推荐文章于 2022-12-12 13:55:55 发布
阅读量247 收藏
点赞数
原文链接：http://www.cnblogs.com/xiaoyiyi/p/8557194.html
版权

1.封装函数addClass()

function addClass(obj, className){
		//如果原来没有class
		if( obj.className == ''){
			obj.className = className;
		} else {
		//如果原来有class
			var arrClassName = obj.className.split(' ');
			var _index = arrClassName.indexOf(className);
			if(_index == -1){
				//如果要添加的class原来的class找不到
				obj.className += ' ' + className;
			} 
				//如果能找到，不操作	
		}
	}
	//indexOf()兼容
	Array.prototype.indexOf = Array.prototype.indexOf ||function (index){
		var arr = this;
		var len = arr.length;
		for (var i=0; i<len; i++){
			if(arr[i] == index){
				return i;
			}
		}
		return -1;
	}

2.封装函数removeClass() ，字符串split()和数组join()

function removeClass(obj, className){
		//如果原来有class
		if( obj.className != ' '){
			var arrClassName = obj.className.split(' ');//拆分为数组
			var _index = arrClassName.indexOf(className);
			if( _index != -1){
				arrClassName.splice(_index, 1);
				obj.className = arrClassName.join(' ');//删除后，组合为字符串
			}
		}
	}
//indexOf()兼容
	Array.prototype.indexOf = Array.prototype.indexOf ||function (index){
		var arr = this;
		var len = arr.length;
		for (var i=0; i<len; i++){
			if(arr[i] == index){
				return i;
			}
		}
		return -1;
	}

3.验证

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>dom</title>
</head>
<body>
	<div id ="div1" class = "box box1">11111</div>
	<div id ="div2" class = "box box1">11111</div>
</body>
</html>

　　试试addClass(oDiv1, 'box2')、addClass(oDiv1, 'box1')等

var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
addClass(oDiv1, 'box2'); 
removeClass(oDiv2, 'box1');

　　

转载于:https://www.cnblogs.com/xiaoyiyi/p/8557194.html

weixin_30867015
关注
js：对dom元素class属性进行读取、更新、移除操作
彭世瑜的博客
09-07 2014
综上，一共有三种方式对dom元素class属性进行读取、更新、移除操作。DOMTokenList对象。
微信小程序点击移除添加class（点击改变背景颜色和字体颜色）
03-29
微信小程序不允许DOM操作，所以不能用addClass这种方法，我的用法如下。点击元素后，获取元素中data-select值，赋值给catalogSelect，然后判断二者是否相等，一样则添加class（class的css可以先写好）。 !--页面-- v ...       微信小程序不允许DOM操作，所以不能用addClass这种方法，我的用法如下。 点击元素后，获取元素中data-select值，赋值给catalogSelect，然后判断二者是否相等，一样则添加class（class的css可以先写好）。 (此图片来源于网络，如有侵权，请联系删除! ) <view cl
jq dom操作中新增class 移除class 移除某个元素的方法
茉莉的博客
04-02 868
为某个元素新增一个class $('#egg').addClass("eggsImg"); 移除某个不用的class $('#egg').removeClass("egg"); 新增元素 $('body').prepend(str); 移除元素 $('.bg-mask').remove();
原生JS给DOM元素增加修改删除class
Missing
10-16 3165
上古时代常用的方法 document.getElementsByTagName('body')[0].className = 'snow-container'; //把所有class替换成指定class document.getElementsByClassName('test')[1].setAttribute("class",'newClass') //与上一个等价 document.ge...
原生js操作dom添加删除替换class
weixin_30810239的博客
04-25 1746
1.比较传统的方法 var classVal = document.getElementById("id").getAttribute("class"); //删除的话classVal = classVal.replace("someClassName","");document.getElementById("id").setAttribute("class",classVal ); ...
jQuery 选择器、DOM操作、事件、动画
12-03
本篇文章将深入探讨jQuery中的选择器、DOM操作、事件以及动画。 ### jQuery选择器 jQuery的选择器允许开发者高效地选取DOM元素，类似于CSS选择器。 1. **基本选择器**： - `$("#test")` 选择ID为`test`的元素。 ...
浅谈jQuery 选择器和dom操作
10-22
基本选择器是最常用也是最简单的选择器，它允许开发者根据元素的id、class和标签名来选取DOM元素。例如，使用“#id”选择器可以选取具有指定id的单一元素，而“.class”选择器可以选取所有具有特定class的元素。标签...
jQuery中的类名选择器（.class）用法简单示例
10-18
标题与描述中提到的知识点主要集中在jQuery类名选择器的使用上，类名选择器是jQuery提供的功能强大的选择器之一，用于选取具有特定CSS类的元素。下面详细说明这些知识点。 ### jQuery类名选择器概念与原理 1. **...
Javascript封装id、class与元素选择器方法示例
10-20
本篇文章主要介绍了如何在Javascript中封装id、class以及元素选择器方法，通过示例代码的形式，详细地讲解了选择器封装的实现方式，同时考虑到了浏览器兼容性问题。封装后的选择器方法能够更加方便地在项目中使用，...
用原生dom增加删除替换class
weixin_52608028的博客
02-21 299
document.querySelector('.choice-answer .active').classList.replace("active","active-other");
便捷地添加或去除class--classList
Meskjei的博客
03-19 1033
在开发中，经常碰到需要为某个DOM节点添加或去除一个class的情况。 在这种情况下，要移除一个class，一般的做法是拿到DOM节点的className属性，然后将其拆分成数组。然后遍历数组元素找到要移除的属性然后将该项删除，把数组重新拼成字符串然后重新设置DOM节点的className属性。代码如下： //假设div变量是一个DOM对象，'foo'是要移除的class let classNam...
使用js根据classname批量移除dom
以码会友
01-05 2443
先上代码： const arr = document.getElementsByClassName('classname'); const l = arr.length; for (let i = l - 1; i >= 0; i--) { if (arr[i] != null) { arr[i].parentNode.removeChild(arr[i]); } } 之前在论坛看到其他小伙伴用的正向遍历，即i++，试了下发现每次不能清除干净，总会漏掉几个。这是因为arr长度发.
为DOM节点添加或者删除class
weixin_30569033的博客
06-12 775
项目中如果应用了常用的javascript类库，多数情况下，这些已经封装好的类库，都会封装一个类似于addClass和removeClass的方法，以便于我们对DOM节点的class进行操作。 以jQuery为例： $(dom).addClass("a").removeClass("b"); 由于是封装好的方法，我们甚至都不需要检查需要操作的class在DOM中是否存在，用起来的...
jquery源代码分析之dom操作：removeClass
dasuite3397的博客
06-26 103
　　　　　　removeClass(className)：从匹配的元素中删除类 　　　　　　@param (string) className 　　　　　　@return (jQuery) 1 /* 2 1.对传进的参数value进行检测 3 */ 4 if ( value &&...
用原生js实现addClass,removeClass,hasClass方法
东篱与南山
04-18 2万+
其实html5已经扩展了class操作的相关API，其中classList属性就以及实现了class的增删和判断。 classList属性的方法有： add(value) 添加类名，如果有则不添加 contains(value) 判断是否存在类名，返回Boolean值 remove(value) 从列表中删除类名 toggle(value) 切换类名：如果列表中存在则删除
移除目标元素的className-removeClass
Focus-Fe
03-19 823
api的应用场景是：移除目标元素的className   关于className的资料：http://zhangyaochun.iteye.com/blog/1456976 关于ZYC.dom.g请看这里：http://zhangyaochun.iteye.com/blog/1439262     /* *removeClass-remove the className fr...
原生JS实现addClass,removeClass,toggleClass
热门推荐
LowKeySk的专栏
10-12 10万+
jQuery操作class的方式非常强大，但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addClass:为指定的dom元素添加样式 2.removeClass:删除指定dom元素的样式 3.toggleClass:如果存在(不存在)，就删除(添加)一个样式 4.hasClass:判断样
DOM操作class与style
m0_67212141的博客
12-12 1268
快来学习吧，原创不易，多多支持呀！每篇都是干货!
用JS添加和删除class类名
codingWeb的博客
08-01 5482
下面介绍一下如何给一个节点添加和删除class名 添加：节点.classList.add(“类名”)； 删除：节点.classList.remove(“类名”)； 以tab切换为例： 在写tab切换的时候，通常我们会给选中的tab设置不同的样式，常用的方法是给被选中的tab新增一个class名，然后改这个class名的样式。 比如 起一个class名叫“active” 设置样式 .active{ ...
js中怎么往选择器里面添加class类
最新发布
09-08
在JavaScript中可以使用classList属性来往选择器中添加类。 classList是一个DOM元素的属性，它提供了一些方法来添加、移除或切换元素的类。 要向选择器中添加类，需要先通过选择器获取到对应的DOM元素，然后使用classList属性进行操作。 首先，可以使用querySelector或querySelectorAll方法来选择需要操作的DOM元素。例如， ```javascript var element = document.querySelector(".selector"); // 选择器可以是类选择器、id选择器或标签选择器 ``` 接下来，可以使用classList的add方法向该DOM元素中添加类。例如， ```javascript element.classList.add("new-class"); // 添加名为"new-class"的类 ``` 如果需要添加多个类，可以连续调用add方法。例如， ```javascript element.classList.add("class1", "class2", "class3"); // 添加多个类 ``` 另外，classList还提供了remove方法用于移除类，toggle方法用于在类存在时移除，不存在时添加，和contains方法用于判断元素是否包含某个类。例如， ```javascript element.classList.remove("class-to-remove"); // 移除名为"class-to-remove"的类 element.classList.toggle("class-to-toggle"); // 切换名为"class-to-toggle"的类的状态 var hasClass = element.classList.contains("check-class"); // 判断是否包含名为"check-class"的类，返回true或false ``` 通过classList属性的这些方法，可以实现向选择器中添加类的操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值