代码描述:JavaScript 删除class属性。JavaScript 删除class属性
本文介绍一下利用JavaScript删除元素的class属性。 考虑范围更广一些,可以包括如下两个操作: (1).删除class属性。 (2).删除class属性值中的某一个类。 一.删除class属性: 此操作非常的粗暴简单,代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51qianduan.com/" /> <title>JavaScript 删除class属性</title> <style> #ant{ width:120px; height:50px; background-color:#ccc; text-align:center; } .a{color:red;} </style> <script> window.onload=function(){ let odiv=document.getElementById("ant"); let obt=document.getElementById("bt"); obt.onclick=function(){ odiv.removeAttribute("class"); } } </script> </head> <body> <div id="ant" class="a">51前端</div> <input type="button" id="bt" value="查看效果"/> </body> </html>
点击按钮可以删除div的class属性可以看到,元素的class属性已经被彻底删除。 二.删除class属性值中的指定类: 假设div元素的class属性值为"a b",下面要删除b。 代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51qianduan.com/" /> <title>JavaScript 删除class属性</title> <style> #ant{ width:120px; height:50px; background-color:#ccc; text-align:center; } .a{color:red;} .b{line-height:50px;} </style> <script> window.onload=function(){ let odiv=document.getElementById("ant"); let obt=document.getElementById("bt"); obt.onclick=function(){ odiv.classList.remove("b"); } } </script> </head> <body> <div id="ant" class="a b">51前端</div> <input type="button" id="bt" value="查看效果"/> </body> </html>
点击按钮可以删除样式类"b"。 如果要删除多个样式类,为remove方法传递多个参数即可,用逗号分隔。
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能