JavaScript 刪除class屬性
本文介紹一下利用JavaScript刪除元素的class屬性。
考慮範圍更廣一些,可以包括如下兩個操作:
(1).刪除class屬性。
(2).刪除class屬性值中的某一個類。
一.刪除class屬性:
此操作非常的粗暴簡單,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</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">螞蟻部落</div> <input type="button" id="bt" value="檢視效果"/> </body> </html>
點選按鈕可以刪除div的class屬性,程式碼執行效果截圖如下:
可以看到,元素的class屬性已經被徹底刪除。
二.刪除class屬性值中的指定類:
假設div元素的class屬性值為"a b",下面要刪除b。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</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">螞蟻部落</div> <input type="button" id="bt" value="檢視效果"/> </body> </html>
點選按鈕可以刪除樣式類"b",程式碼執行效果截圖如下:
上述程式碼使用了HTML5新增的classList屬性,具體參閱JavaScript classList 屬性一章節。
如果要刪除多個樣式類,為remove方法傳遞多個引數即可,用逗號分隔。
相關文章
- class屬性的新增刪除
- JavaScript刪除和清空物件屬性JavaScript物件
- jQuery新增和刪除元素class屬性例項程式碼jQuery
- javascript刪除class樣式類JavaScript
- javascript如何動態刪除或者新增物件屬性JavaScript物件
- javascript delete刪除屬性的注意點簡單介紹JavaScriptdelete
- javascript基礎(class 類屬性的操作(增,刪,改,查))(四十五)JavaScript
- 刪除多餘的屬性 xmlns=""XML
- HTML class 屬性HTML
- js為物件新增和刪除屬性JS物件
- javascript如何獲取具有指定class屬性的元素物件JavaScript物件
- javascript通過class屬性獲取元素的程式碼JavaScript
- jQuery 新增和刪除classjQuery
- javascript如何刪除一個單獨的class樣式類JavaScript
- 如何刪除使用prop()方法新增的屬性
- 巧用 Class Extension 隱藏屬性
- Win10右鍵圖形屬性如何刪除 win10刪除右鍵圖形屬性選項的步驟Win10
- [BUG反饋]刪除模型屬性時 不會刪除模型表的field_sort模型
- jQuery為元素新增和刪除classjQuery
- JavaScript 刪除cookieJavaScriptCookie
- JavaScript files 屬性JavaScript
- JavaScript childElementCount 屬性JavaScript
- JavaScript offsetX 屬性JavaScript
- JavaScript firstChild屬性JavaScript
- JavaScript classList 屬性JavaScript
- JavaScript cells 屬性JavaScript
- JavaScript rows 屬性JavaScript
- JavaScript nodeName 屬性JavaScript
- JavaScript rowIndex 屬性JavaScriptIndex
- JavaScript tagName 屬性JavaScript
- JavaScript parentNode 屬性JavaScript
- JavaScript prototype屬性JavaScript
- JavaScript NaN 屬性JavaScriptNaN
- JavaScript Infinity 屬性JavaScript
- JavaScript className 屬性JavaScript
- JavaScript style 屬性JavaScript
- JavaScript firstElementChild 屬性JavaScript
- JavaScript私有屬性和靜態屬性JavaScript