JS removeAttribute()方法:刪除元素的某個屬性

2020-07-16 10:05:07
在 JavaScript 中,使用元素的 removeAttribute() 方法可以刪除指定的屬性。用法如下:

removeAttribute(name)

引數 name 表示元素的屬性名。

範例1

下面範例演示了如何動態設定表格的邊框。
<script>
    window.onload = function () {  //係結頁面載入完畢時的事件處理常式
        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>資料表格</td>
    <tr>
</table>
<button id="del">刪除</button><button id="reset">恢復</button>
在上面範例中設計了兩個按鈕,並分別系結了不同的事件處理常式。單擊“刪除”按鈕即可呼叫表格的 removeAttribute() 方法清除表格邊框,單擊“恢復”按鈕即可呼叫表格的 setAttribute() 方法重新設定表哥便可的粗細。

範例2

下面範例演示了如何自定義刪除類函數,並呼叫該函數刪除指定類名。
<script>
    function hasClass (element, className) {  //類名檢測函數
        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 屬性值字串中是否包含指定的類名,如果存在,則使用空字串替換掉匹配到的子字串,從而實現刪除類名的目的。