Question

为什么removeAttribute()没有删除以下代码中的任何内容：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>test</title>
</head>
<body>
    <div id="myDiv">
        Element with style.
    </div>
    <br />
    <br />
    <button onclick="DelStyle()">
        Remove the style attribute from the element
    </button>
    <script type="text/javascript">
        function DelStyle() {
            var div = document.getElementById("myDiv");
            console.log(div)
            div.style.border = 'solid #3B3B3D 1px';
            console.log(div)
            div.removeAttribute("style");
            console.log(div)
        }
    </script>
</body>
</html>

Answer 1

只需在removeAttribute（“style”）之前调用getAttribute（“style”）。

e.g。

    function DelStyle() {
        var div = document.getElementById("myDiv");
        console.log(div)
        div.style.border = 'solid #3B3B3D 1px';
        console.log(div)
        div.getAttribute("style");
        div.removeAttribute("style");
        console.log(div)
    }

请参阅http://jsfiddle.net/qTv22/

这看起来非常像Chrome JS优化错误。虽然HTML5规范说

样式IDL属性必须返回其值为的CSSStyleDeclaration 表示属性中指定的声明（如果存在）。改变CSSStyleDeclaration对象必须创建一个style属性在元素上（如果还没有），然后更改其值是一个代表序列化形式的值 CSSStyleDeclaration对象。必须返回相同的对象时间。

Chrome正试图尽可能延迟创建样式属性，以便将IDL属性的一系列突变汇总到内容属性的单个创建/更改中。代码只是省略在removeAttribute调用之前执行创建/更改操作，但对getAttribute执行正确。创建content属性后，removeAttribute将成功销毁它。

Answer 2

问题是您在DOM更新之前立即进行所有这些更改。相反，请考虑实际将样式属性设置为 here

        div.setAttribute("style","");

Answer 3

作为advised on MDN，应该使用removeAttribute over设置为null或空字符串。

它可能无法正常工作，如果您要定位的标准较低的浏览器不支持RAF，解决方案是使用requestAnimationFrame或setInterval。

Answer 4

看起来需要更多时间example

function DelStyle() {
    var div = document.getElementById("myDiv");
    console.log(div)
    div.style.border = 'solid #3B3B3D 1px';
    console.log(div)
    setTimeout((function(div) {
        return function() {
            div.removeAttribute("style");
            console.log(div);
        }
    })(div), 500);

}

我在半秒后删除属性。

Answer 5

我在调用setAttribute()之前尝试同时调用getAttribute()和removeAttribute()方法。

它对我没用：没有将style属性设置为空。

使用removeAttributeNode()方法的工作是什么。

如此处所述：http://www.w3schools.com/jsref/met_element_removeattributenode.asp结果将是相同的; e.g。

function DelStyle() {
    var div = document.getElementById("myDiv");
    console.log(div)
    div.style.border = 'solid #3B3B3D 1px';
    console.log(div)
    div.removeAttributeNode(div.getAttribute("style"));
    console.log(div)
}

Answer 6

测试此

div.attributes.removeNamedItem("style");

Answer 7

我在使用removeProperty和removeAttribute时遇到麻烦。我通过在我的html中而不是在CSS中编写该属性/属性的原始实例来解决此问题。

removeAttribute（）不起作用DOM

7 个答案: