本文介紹一下利用JavaScript刪除元素的class屬性。
考慮范圍更廣一些,可以包括如下兩個操作:
(1).刪除class屬性。
(2).刪除class屬性值中的某一個類。
一.刪除class屬性:
此操作非常的粗暴簡單,代碼實例如下:
   [ 其他 ] 運行代碼    下載代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.vxisgr.tw/" />
<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.vxisgr.tw/" />
<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方法傳遞多個參數即可,用逗號分隔。

代碼描述:JavaScript 刪除class屬性,JavaScript 刪除class屬性



52 69



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: js js代碼 js實例 javascript javascript代碼 javascript實例 基礎js 基礎javajcript
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表