JS removeAttribute()方法實現(xiàn)刪除元素的某個屬性
在 JavaScript 中，使用元素的 removeAttribute() 方法可以刪除指定的屬性。用法如下：
removeAttribute(name)
參數(shù) name 表示元素的屬性名。
示例1
下面示例演示了如何動態(tài)設(shè)置表格的邊框。
<script>
window.onload = function () { //綁定頁面加載完畢時的事件處理函數(shù)
var table = document.getElementByTagName("table")[0]; //獲取表格外框的引用
var del = document.getElementById("del");
var reset = document.getElementById("reset");
del.onclick = function () {
table.removeAttribute("border");
}
reset.onclick = function () {
table.setAttribute("border", "2");
}
</script>
<table width="100%" border="2">
<tr>
<td>數(shù)據(jù)表格</td>
<tr>
</table>
<button id="del">刪除</button><button id="reset">恢復(fù)</button>
在上面示例中設(shè)計了兩個按鈕，并分別綁定了不同的事件處理函數(shù)。單擊“刪除”按鈕即可調(diào)用表格的 removeAttribute() 方法清除表格邊框，單擊“恢復(fù)”按鈕即可調(diào)用表格的 setAttribute() 方法重新設(shè)置表哥便可的粗細(xì)。
示例2
下面示例演示了如何自定義刪除類函數(shù)，并調(diào)用該函數(shù)刪除指定類名。
<script>
function hasClass (element, className) { //類名檢測函數(shù)
var reg = new RegExp ('(\\s|^)' + className + '(\\s|$)');
return reg.test (element, className); //使用正則檢測是否有相同的樣式
}
function deleteClass (element, className) {
if (hasClass (element, className)) {
element.className.replace (reg, ' '); //捕獲要刪除樣式，然后替換為空白字符串
}
}
</script>
<div id="red" class="red blue bold">盒子</div>
<script>
var red = document.getElementById ("red");
deleteClass (red, 'blue');
</script>
上面代碼使用正則表達(dá)式檢測 className 屬性值字符串中是否包含指定的類名，如果存在，則使用空字符串替換掉匹配到的子字符串，從而實現(xiàn)刪除類名的目的。
removeAttribute與removeAttributeNode方法異同
removeAttribute
移除節(jié)點指定名稱的屬性。示例如下
document.getElementById('riskTypePie').removeAttribute("style");
removeAttributeNode
注：此方法不兼容IE。
使用方法：
- 獲取要刪除屬性的元素
- 獲取該元素要刪除的屬性
- <元素>.removeAttributeNode<屬性>
var node=document.getElementById('chartWrap');
var attr=n.getAttributeNode('style');
node.removeAttributeNode(attr);
異同分析
相同點
- 兩個方法都是用來移除節(jié)點屬性
- 兩種方法調(diào)用者都只能是標(biāo)簽節(jié)點
不同點
- removeAttribute方法接收的是要刪除屬性的名字
- removeAttributeNode方法接收的是要刪除的屬性節(jié)點它本身
到此這篇關(guān)于JS removeAttribute()方法實現(xiàn)刪除元素的某個屬性的文章就介紹到這了,更多相關(guān)JS removeAttribute()刪除元素屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
最近在項目需求中遇到之前沒有做過的功能,下面這篇文章主要給大家介紹了關(guān)于JS實用案例之輸入智能提示,文中通過實例代碼介紹的非常詳細(xì),打字機(jī)輸出效果的相關(guān)資料,需要的朋友可以參考下2023-01-01
JavaScript最完整的深淺拷貝實現(xiàn)方式詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript最完整的深淺拷貝實現(xiàn)方式，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要介紹了如何從對象數(shù)組中篩選符合條件的值，具有很好的參考價值，希望對大家有所幫助。2022-09-09
這篇文章主要介紹了微信小程序傳值以及獲取值方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
當(dāng)圖片不存在時載入默認(rèn)圖片的代碼2009-12-12
javascript使用substring實現(xiàn)的展開與收縮文字功能示例
這篇文章主要介紹了javascript使用substring實現(xiàn)的展開與收縮文字功能,涉及javascript元素遍歷與屬性設(shè)置相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
waypoints的功能非常強(qiáng)大，一款用于捕獲各種滾動事件的插件，下面跟隨腳本之家小編一起學(xué)習(xí)JS庫之Waypoints的用法吧2017-09-09
最近發(fā)現(xiàn)JS當(dāng)中toFixed()方法存在一些問題，采用原生的Number對象的原型對象上的toFixed()方法時，規(guī)則并不是所謂的“四舍五入”或者是四舍六入五成雙2012-11-11
js實現(xiàn)點擊切換checkbox背景圖片的簡單實例
下面小編就為大家?guī)硪黄猨s實現(xiàn)點擊切換checkbox背景圖片的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡單搖篩子小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10