JavaScript经典案例：添加/删除元素类名

客官°小女子只卖身不卖艺 2022-12-24 10:59 132阅读 0赞

效果展示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTY1Mzkz_size_16_color_FFFFFF_t_70]

CSS代码：

<style type="text/css">
    	#btn-wrapper {
    		width: 300px;
    		height: 100px;
    		text-align: center;
    		line-height: 100px;
    		margin: 50px auto;
    		background-color: #FAEBD7;
    	}
    
    	#dis-box {
    		width: 300px;
    		height: 50px;
    		text-align: center;
    		line-height: 50px;
    		margin: 0 auto;
    		background-color: #FAF0E6;
    	}
    </style>

HTML代码：

<div id="btn-wrapper">
    	<button type="button" id="insert">添加类名</button>
    	<button type="button" id="delete">删除类名</button>
    	<button type="button" id="toggle">切换类名</button>
    </div>
    <div id="dis-box"></div>

JavaScript代码：

<script type="text/javascript">
    	window.onload = function() {
    		/**
    		 * 为指定元素添加新的类名
    		 * @param {参数类名} cname
    		 * @param {元素对象} object
    		 */
    		function specifyClassAttr(object, cname) {
    			// 校验元素是否已有相同的类名，无则为元素添加新的class类名
    			if (!new RegExp("\\b" + cname + "\\b").test(object.className)) {
    				object.className += "" + cname;
    			}
    		}
    
    		/**
    		 * 删除指定元素的类名
    		 * @param {目标类名} cname
    		 * @param {元素对象} object
    		 */
    		function delClassName(object, cname) {
    			var regExp = new RegExp("\\b" + cname + "\\b");
    			object.className = object.className.replace(regExp, "");
    		}
    
    		/**
    		 * 删除或为元素添加类名
    		 * @param {Object} cname
    		 * @param {Object} object
    		 */
    		function toggleClassName(object, cname) {
    			if (new RegExp("\\b" + cname + "\\b").test(object.className)) {
    				delClassName(object, cname);
    			} else {
    				specifyClassAttr(object, cname);
    			}
    		}
    
    		// 实时更新当前元素的样式
    		function displayStyle() {
    			var display = document.getElementById("dis-box"); // 样式显示容器
    			var cname = document.getElementById("insert").className;
    			if (cname.length != 0) {
    				display.innerHTML = "元素类名：" + cname;
    			} else {
    				display.innerHTML = "元素暂无类名";
    			}
    		}
    
    		document.getElementById("insert").onclick = function() {
    			specifyClassAttr(this, "myClass");
    			displayStyle();
    		}
    
    		document.getElementById("delete").onclick = function() {
    			delClassName(document.getElementById("insert"), "myClass");
    			displayStyle();
    		}
    
    		document.getElementById("toggle").onclick = function() {
    			toggleClassName(document.getElementById("insert"), "myClass");
    			displayStyle();
    		}
    	}
    </script>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTY1Mzkz_size_16_color_FFFFFF_t_70]: /images/20221120/b135809350d242078c8ebb205913d956.png

发表评论取消回复

表情：

评论列表（有 0 条评论，132人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript经典案例：添加/删除元素类名

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

客官°小女子只卖身不卖艺/ 2022年12月24日 10:59/ 0 赞/ 133 阅读

相关 JavaScript经典案例：键盘控制元素移动

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

淡淡的烟草味﹌/ 2022年12月23日 12:25/ 0 赞/ 153 阅读

相关 JavaScript经典案例：页面元素拖拽

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

小鱼儿/ 2022年12月23日 11:14/ 0 赞/ 163 阅读

相关 JavaScript经典案例：网页元素跟踪移动

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

红太狼/ 2022年12月23日 06:12/ 0 赞/ 122 阅读

相关 php 数组添加元素、删除元素

拆分数组 PHP数组添加一个元素的方式： push(), arr\[\], Php代码 $arr = array(); array_push($

拼搏现实的明天。/ 2022年09月24日 14:23/ 0 赞/ 237 阅读

相关 js动态给dom元素添加类名

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

青旅半醒/ 2022年09月07日 09:38/ 0 赞/ 292 阅读

相关 JavaScript--动态添加元素

在网页中，使用JavaScript动态创建元素的方式有三种： 1.document.write() 2.Element.innerHTML 3.document.crea

旧城等待，/ 2022年03月28日 04:38/ 0 赞/ 293 阅读

相关 Javascript 删除tr 元素

Javascript function delete1(obj){ var tr=obj.parentNode.parentNode;

Myth丶恋晨/ 2022年01月06日 18:45/ 0 赞/ 321 阅读

相关 JQuery添加删除元素

JQuery提供了添加元素的四种方法： append() - 在被选元素内部的结尾插入指定内容 prepend() - 在被选元素内部的开头插入指定内容 after()

末蓝、/ 2021年09月14日 02:44/ 0 赞/ 540 阅读

相关 JavaScript创建、添加、删除元素

（1）createElement("元素名")：此方法可以创建一个新的元素。例如：createElement("p") ，表示创建了一个p标签（元素/段落）。（2）crea

Bertha 。/ 2021年09月14日 02:20/ 0 赞/ 499 阅读