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.com" 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

打印页面