Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
103 views
in Technique[技术] by (71.8m points)

javascript - removeAttribute()不支持DOM(removeAttribute() doesn't work DOM)

Why doesn't removeAttribute() remove anything in the following code:(为什么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>
  ask by AlaskaKid translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Just call getAttribute("style") before removeAttribute("style").(只需在removeAttribute(“ style”)之前调用getAttribute(“ style”)即可。)

eg(例如)

    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)
    }

See http://jsfiddle.net/qTv22/(参见http://jsfiddle.net/qTv22/)

This looks very much like a Chrome JS optimization bug.(这看起来非常像Chrome JS优化错误。)

Although the HTML5 spec says(尽管HTML5规范说)

The style IDL attribute must return a CSSStyleDeclaration whose value represents the declarations specified in the attribute, if present.(样式IDL属性必须返回CSSStyleDeclaration,其值表示该属性中指定的声明(如果存在)。)

Mutating the CSSStyleDeclaration object must create a style attribute on the element (if there isn't one already) and then change its value to be a value representing the serialized form of the CSSStyleDeclaration object.(突变CSSStyleDeclaration对象必须在元素上创建一个style属性(如果还没有),然后将其值更改为代表CSSStyleDeclaration对象的序列化形式的值。) The same object must be returned each time.(每次必须返回相同的对象。)

Chrome is trying to defer the creating of the style attribute for as long as it can, so that a series of mutations of the IDL attribute can be rolled up into a single creation/change of the content attribute.(Chrome浏览器正尝试尽可能长时间地延迟style属性的创建,以便将IDL属性的一系列变化汇总为单个content属性的创建/更改。)

The code is simply omitting to perform the create/change action before the removeAttribute call, but does so correctly for getAttribute.(该代码只是省略了在removeAttribute调用之前执行create / change操作,但对于getAttribute则正确执行了此操作。) Once the content attribute has been created, removeAttribute will successfully destroy it.(一旦创建了content属性,removeAttribute将成功销毁它。)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...