javascript实用小功能----增加、删除、判断、切换HTML元素的class值

最新推荐文章于 2024-08-26 11:03:08 发布

原创最新推荐文章于 2024-08-26 11:03:08 发布 · 605 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript操作html元素的class属性值

javaScript 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一组用于操作DOM元素类的JavaScript函数，包括添加、删除和切换类的方法，适用于前端开发人员快速实现元素样式控制。

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

已经封装好的，按着要求传入参数即可

//定义一个函数，用来向一个元素中添加指定的class属性值
/*
 * 参数:
 * 	obj 要添加class属性的元素
 *  cn 要添加的class值
 * 	
 */
function addClass(obj, cn) {

	//检查obj中是否含有cn
	if(!hasClass(obj, cn)) {
		obj.className += " " + cn;
	}

}

/*
 * 判断一个元素中是否含有指定的class属性值
 * 	如果有该class，则返回true，没有则返回false
 * 	
 */
function hasClass(obj, cn) {

	//判断obj中有没有cn class
	//创建一个正则表达式
	//var reg = /\bb2\b/;
	var reg = new RegExp("\\b" + cn + "\\b");

	return reg.test(obj.className);

}

/*
 * 删除一个元素中的指定的class属性
 */
function removeClass(obj, cn) {
	//创建一个正则表达式
	var reg = new RegExp("\\b" + cn + "\\b");

	//删除class
	obj.className = obj.className.replace(reg, "");

}

/*
 * toggleClass可以用来切换一个类
 * 	如果元素中具有该类，则删除
 * 	如果元素中没有该类，则添加
 */
function toggleClass(obj, cn) {

	//判断obj中是否含有cn
	if(hasClass(obj, cn)) {
		//有，则删除
		removeClass(obj, cn);
	} else {
		//没有，则添加
		addClass(obj, cn);
	}

}