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">恢復</button>
在上面示例中設(shè)計了兩個按鈕,并分別綁定了不同的事件處理函數(shù)。單擊“刪除”按鈕即可調(diào)用表格的 removeAttribute() 方法清除表格邊框,單擊“恢復”按鈕即可調(diào)用表格的 setAttribute() 方法重新設(shè)置表哥便可的粗細。
示例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>
上面代碼使用正則表達式檢測 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)用者都只能是標簽節(jié)點
不同點
- removeAttribute方法接收的是要刪除屬性的名字
- removeAttributeNode方法接收的是要刪除的屬性節(jié)點它本身
到此這篇關(guān)于JS removeAttribute()方法實現(xiàn)刪除元素的某個屬性的文章就介紹到這了,更多相關(guān)JS removeAttribute()刪除元素屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
利用Print.js實現(xiàn)打印pdf、HTML及圖片(可設(shè)置樣式可分頁)
在我們需要在頁面中打印某個區(qū)域的內(nèi)容或者生成pdf的時候,我們可以直接用printJs庫,這篇文章主要給大家介紹了關(guān)于利用Print.js實現(xiàn)打印pdf、HTML及圖片的相關(guān)資料,可設(shè)置樣式可分頁,需要的朋友可以參考下2024-05-05詳解js的延遲對象、跨域、模板引擎、彈出層、AJAX【附實例下載】
本篇文章主要介紹了JavaScript的延遲對象、跨域、模板引擎、彈出層、AJAX,對其進行示例解析,具有很好的參考價值,需要的朋友一起來看下吧2016-12-12Javascript數(shù)組的排序 sort()方法和reverse()方法
JavaScript提供了sort()方法和reverse()方法,使得我們可以簡單的對數(shù)組進行排序操作和逆序操作2012-06-06javascript實現(xiàn)簡約的頁面右下角點擊彈出窗口示例【測試可用】
這篇文章主要介紹了javascript實現(xiàn)的頁面右下角點擊彈出窗口功能,結(jié)合實例形式詳細分析了javascript頁面右下角點擊彈出窗口功能的相關(guān)步驟、原理與注意事項,需要的朋友可以參考下2023-07-07