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 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 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)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!
相關(guān)文章:
1. php使用正則驗證密碼字段的復(fù)雜強度原理詳細(xì)講解 原創(chuàng)2. 基于javaweb+jsp實現(xiàn)企業(yè)車輛管理系統(tǒng)3. HTML5實戰(zhàn)與剖析之觸摸事件(touchstart、touchmove和touchend)4. ASP將數(shù)字轉(zhuǎn)中文數(shù)字(大寫金額)的函數(shù)5. Jsp servlet驗證碼工具類分享6. jscript與vbscript 操作XML元素屬性的代碼7. 基于PHP做個圖片防盜鏈8. Jsp+Servlet實現(xiàn)文件上傳下載 文件列表展示(二)9. asp.net core 認(rèn)證和授權(quán)實例詳解10. XML在語音合成中的應(yīng)用