jQuery addClass，removeClass，class属性增删

我会带着你远行 2023-10-06 09:12 4阅读 0赞

效果图，添加、移除class属性

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTIxODQ4_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTIxODQ4_size_16_color_FFFFFF_t_70 1][]

上代码：

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			.myclass {
    				background-color: red;
    			}
    		</style>
    		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.0/jquery.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			function add() {
    				$("#mydiv").addClass("myclass");
    			}
    
    			function remo() {
    				$("#mydiv").removeClass("myclass");
    			}
    		</script>
    	</head>
    
    	<body>
    		<pre>
    			addClass、removeClass给元素添加class属性
    		</pre>
    		<div id="mydiv" style="border: solid;width: 200px;height: 200px;">
    		</div>
    		<input type="button" value="addClass" onclick="add()" />
    		<input type="button" value="remoClass" onclick="remo()" />
    	</body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTIxODQ4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200520221906759.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTIxODQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTIxODQ4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200520221936131.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM2NTIxODQ4,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

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

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

相关阅读

相关 jQuery addClass，removeClass，class属性增删

效果图，添加、移除class属性 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

我会带着你远行/ 2023年10月06日 09:12/ 0 赞/ 5 阅读

相关 jQuery的增删改方法

append()/appendTo():向指定项最后添加元素 prepend()/prependTo():向指定项最前面添加元素 replaceWith():替换指定元

素颜马尾好姑娘i/ 2022年12月02日 12:29/ 0 赞/ 153 阅读

相关 jQuery属性使用

attr()用于读取或设置属性 removeAttr()用于移除属性 addClass()用于添加属性 html()用于设置或读取文本 val()用于读取或设置

梦里梦外;/ 2022年12月02日 04:24/ 0 赞/ 153 阅读

相关 JQuery的属性

1. attr(name|properties|key,value|fn) : 设置或返回被选元素的属性值 ①获取属性 <pre style="margin: 0p

柔光的暖阳◎/ 2022年11月10日 05:35/ 0 赞/ 176 阅读

相关 jquery属性操作添加属性

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

淩亂°似流年/ 2022年07月14日 00:40/ 0 赞/ 287 阅读

相关 jQuery修改class属性

1.addClass() addClass()方法向匹配的元素增加指定的类名(一个或多个) 注意:对于元素来说,class属性可以有多个值.该方法不会移除已经存在的值,而

梦里梦外;/ 2022年05月15日 05:27/ 0 赞/ 234 阅读

相关 jquery属性操作

jquery属性操作 1、html() 取出或设置html内容 // 取出html内容 var $htm = $('div1').html()

╰半夏微凉°/ 2022年05月09日 14:34/ 0 赞/ 236 阅读

相关 jQuery基础（四）—— jQuery属性操作

（1）内容选择器：：has(selector)//选中包含指定子元素的元素：contains（）//选中包含指定文本内容的指定元素：empty（）//选中既没有

怼烎@/ 2022年03月26日 15:28/ 0 赞/ 263 阅读

相关 JQuery操作HTML属性

每一个HTML元素，都是一个DOM对象每一个对象都会有其对应的属性对于如图所示的img标签 ![watermark_type_ZmFuZ3poZW5naGVpdGk_

小鱼儿/ 2022年01月22日 22:37/ 0 赞/ 297 阅读

相关 jQuery属性操作

jQuery属性操作　　使用 jq 操作标签的属性 Demo: 1.获取元素的指定属性值　　attr()可以操作原生属性, 还可以操作自定义的属性　　pro

àì夳堔傛蜴生んèń/ 2022年01月11日 06:45/ 0 赞/ 290 阅读