HTML - DOM 元素 removeAttribute() 方法

removeAttribute() 方法允許您刪除已在 DOM 結構中 HTML 元素上設定的任何屬性。

語法

element.removeAttribute(attribute_name)

引數

此方法接受如下所述的一個引數。

引數	描述
attribute_name	包含要刪除的屬性名稱的字串。

返回值

removeAttribute() 方法不返回任何值。

HTML DOM 元素 'removeAttribute()' 方法示例

以下是 HTML DOM 元素中 removeAttribute() 方法在不同場景下的一些示例。

刪除 Class 屬性

此示例演示瞭如何使用 removeAttribute() 方法從元素中刪除 class 屬性。它包含一個段落 (<p>) 元素，該元素最初具有 highlight 類。單擊按鈕後，此 class 屬性將從段落中刪除。

<!DOCTYPE html>
<html lang="en">
<head>  
    <style>
        .highlight {
            color: red;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>removeAttribute() Method</h2>
    <p>
        Click the button to remove a class attribute!!
    </p>
    
    <p id="myPara" class="highlight">
        This paragraph has a class attribute.
    </p>

    <button onclick="removeClassAttribute()">
        Remove Class Attribute
    </button>

    <div id="ot"></div>

    <script>
        function removeClassAttribute() {
            const p=document.getElementById('myPara');
            p.removeAttribute('class');
            document.getElementById('ot').textContent=
            'Class attribute removed!';
        }
    </script>
</body>

</html>

刪除 href 屬性

此示例演示瞭如何使用 removeAttribute() 方法從錨點 (<a>) 元素中刪除 href 屬性，並檢索將顯示結果的 <div> 元素。

<!DOCTYPE html>
<html lang="en">
<head>  
    <title>Remove href Attribute</title>
</head>

<body>
    <h1>HTML DOM Element</h1>
    <h2>removeAttribute() Method</h2>
    <p>Click the button below to remove the href 
        attribute from the anchor (<a>) element.
    </p>

    <a href="https://tutorialspoint.tw" id="myLink">
        Visit tutorialspoint.com
    </a><br><br>

    <button onclick="removeHref()">
        Remove href Attribute
    </button>

    <div id="output"></div>

    <script>
        function removeHref() {
            const link=document.getElementById('myLink');
            link.removeAttribute('href');
            const ot=document.getElementById('output');
            ot.innerHTML = 
            '<p>Href attribute removed successfully!</p>'
            ;
        }
    </script>
</body>

</html>

新增和刪除 Class 屬性

此示例演示如何使用 removeAttribute() 方法動態地向 HTML 元素新增和刪除 class 屬性。程式碼包含一個按鈕；單擊它時，將刪除 class 屬性，再次單擊它會將 class 屬性添加回段落。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Conditional Attribute Removal</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>removeAttribute() Method</h2>
    <p>Click the button to remove and add a class 
        attribute!!
    </p>

    <input type="text" id="In" value="Initial value" 
            readonly>

    <button onclick="toggleReadonly()">
        Toggle Readonly Attribute
    </button>

    <div id="ot"></div>

    <script>
        function toggleReadonly() {
            const input=document.getElementById('In');
            if (input.hasAttribute('readonly')) {
                input.removeAttribute('readonly');
                document.getElementById('ot').textContent=
                'Readonly attribute removed!';
            } else {
                input.setAttribute('readonly', true);
                document.getElementById('ot').textContent=
                'Readonly attribute added!';
            }
        }
    </script>
</body>

</html>

支援的瀏覽器

方法
removeAttribute()	是	是	是	是	是

html_dom_element_reference.htm

列印頁面