热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

详解原生JS动态添加和删除类

由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类

由于需要, 给按钮组监听点击事件(要求用事件委托),当有一个按钮被点击时,相应的给该按钮添加一个类(激活类),其他没有点击的按钮就要移出该类

添加和和删除类有三种方法

首先等到一个 dom 对象(也叫dom元素), 通过document.getElement……的几种方法得到
如`

let element = document.getElementById("box");

1.通过类名, 获取类名: el.className, 赋值: el.className = "className" 会覆盖掉原来的类

2.通过属性,获取类名: el.getAttribute("class"); 赋值: el.setAttribute("class", "className1 className2"); 会覆盖掉原来的类

3.通过属性节点 attributeNode(性能差一点,但能兼容ie,getAttribute() ie 的有些版本不支持 )setAttributeNode() 方法向元素中添加指定的属性节点。
如果这个指定的属性已存在,则此方法会替换它。,获取类名: getAttributeNode("class").value, 赋值:

let attr = document.createAttribute("class");
attr.nodeValue = "className";
el.setAttributeNode(attr)

4.通过 classList属性, 获取类名 el.classList; 追加类名: el.classList.add("className"); 删除类 : el.calssList.remove("className");

上边四种方法, classList最灵活,最好好用, 但是不支持 ie9 以下的浏览器, 兼容性要差一些

代码如下:

html

按钮1
按钮2
按钮3
按钮4

js代码, 其中用到了ES6语法(用ES6写简洁)

let myEventUtil = {
	// 添加监听事件
	addEvent (element, type, handler) {
		if (element.addEventListener) {
			element.addEventListener(type, handler, false);
		} else if (element.attach){ // ie
			element.attach("on"+ type, handler);
		} else {
			element['on' + type] = handler;
		}
	},
	getTarget (event) {
		let event = event || window.event;
		return event.target || event.srcElement;
	}
}
let my$ = id => document.getElementById(id);

let btnGroup = my$(“btn-group”);
myEventUtil.addEvent(btnGroup, 'on', function (ev) {
	// 给所有的 btn 都移除激活的类 btn-active
	// console.log(this) ==> 是一个dom元素 btnGroup 
	// 可以通过 el.children[i]拿到具体的子元素
	// 拿到子元素了可以通过 el.classList.remove("className") 删除类
	// el.classList.add("className") 来添加类
	
	// 删除类
	let len = this.children.length;
	for (let i = 0; i 

以上所述是小编给大家介绍的原生JS动态添加和删除类详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • 在开发过程中,使用 HTML 的 `` 标签进行视频播放时,可能会遇到视频路径更新但浏览器仍播放缓存中的旧视频的问题。本文将介绍一种有效的方法来解决这一问题。 ... [详细]
  • 本文详细介绍了如何使用SQL*Plus连接Oracle数据库以及使用MySQL客户端连接MySQL数据库的方法,包括基本命令和具体操作步骤。 ... [详细]
  • 实现Win10与Linux服务器的SSH无密码登录
    本文介绍了如何在Windows 10环境下使用Git工具,通过配置SSH密钥对,实现与Linux服务器的无密码登录。主要步骤包括生成本地公钥、上传至服务器以及配置服务器端的信任关系。 ... [详细]
  • PHP中Smarty模板引擎自定义函数详解
    本文详细介绍了如何在PHP的Smarty模板引擎中自定义函数,并通过具体示例演示了这些函数的使用方法和应用场景。适合PHP后端开发者学习。 ... [详细]
  • 汇编语言标识符和表达式(四)(表达式与符号定义语句)
    7、表达式表达式是程序设计课程里的一个重要的基本概念,它可由运算符、操作符、括号、常量和一些符号连在一起的式子。在汇编语言中,表达式分为:数值表达式和地址表达式。(1)进制伪指令R ... [详细]
  • 本文由chszs撰写,详细介绍了Apache Mina框架的核心开发流程及自定义协议处理方法。文章涵盖从创建IoService实例到协议编解码的具体步骤,适合希望深入了解Mina框架应用的开发者。 ... [详细]
  • 本文针对HDU 1042 N! 问题提供详细的解析和代码实现。题目要求计算给定整数N(0 ≤ N ≤ 10000)的阶乘N!。文章不仅提供了算法思路,还附上了C++语言的具体实现。 ... [详细]
  • 本文介绍了使用Python和C语言编写程序来计算一个给定数值的平方根的方法。通过迭代算法,我们能够精确地得到所需的结果。 ... [详细]
  • 本文探讨了Linux环境下线程私有数据(Thread-Specific Data, TSD)的概念及其重要性,介绍了如何通过TSD技术避免多线程间全局变量冲突的问题,并提供了具体的实现方法和示例代码。 ... [详细]
  • 汇总了2023年7月7日最新的网络安全新闻和技术更新,包括最新的漏洞披露、工具发布及安全事件。 ... [详细]
  • Canopy环境安装与使用指南
    《利用Python进行数据分析》一书推荐使用EPDFree版本的环境,然而随着技术的发展,目前更多人倾向于使用Canopy。本文将详细介绍Canopy的安装及使用方法。 ... [详细]
  • 本文提供了一个关于AC自动机(Aho-Corasick Algorithm)的详细解析与实现方法,特别针对P3796题目进行了深入探讨。文章不仅涵盖了AC自动机的基本概念,还重点讲解了如何通过构建失败指针(fail pointer)来提高字符串匹配效率。 ... [详细]
  • 使用Python构建网页版图像编辑器
    本文详细介绍了一款基于Python开发的网页版图像编辑工具,具备多种图像处理功能,如黑白转换、铅笔素描效果等。 ... [详细]
  • 本报告记录了嵌入式软件设计课程中的第二次实验,主要探讨了使用KEIL V5开发环境和ST固件库进行GPIO控制及按键响应编程的方法。通过实际操作,加深了对嵌入式系统硬件接口编程的理解。 ... [详细]
  • 使用OpenGL实现三维空间中任意两点间圆柱体管道的绘制
    本文介绍了如何利用OpenGL在三维空间中的任意两个点之间绘制具有指定半径的圆柱体管道。鉴于OpenGL较为底层,许多功能需自行实现,文中提供了详细的代码示例及解析。 ... [详细]
author-avatar
大众化的公爵樱桃rwr_208
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有