javascript removeAttribute() 不起作用 DOM
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7165359/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
removeAttribute() doesn't work DOM
提问by AlaskaKid
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>
采纳答案by Joseph Marikle
回答by Alohci
Just call getAttribute("style") before removeAttribute("style").
只需在 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)
}
See http://jsfiddle.net/qTv22/
This looks very much like a Chrome JS optimization bug. Although the HTML5 spec says
这看起来很像 Chrome JS 优化错误。虽然 HTML5 规范说
The style IDL attribute must return a CSSStyleDeclaration whose value represents the declarations specified in the attribute, if present. 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. The same object must be returned each time.
样式 IDL 属性必须返回一个 CSSStyleDeclaration，其值表示属性中指定的声明（如果存在）。改变 CSSStyleDeclaration 对象必须在元素上创建一个样式属性（如果还没有），然后将其值更改为表示 CSSStyleDeclaration 对象的序列化形式的值。每次都必须返回相同的对象。
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. The code is simply omitting to perform the create/change action before the removeAttribute call, but does so correctly for getAttribute. Once the content attribute has been created, removeAttribute will successfully destroy it.
Chrome 正在尝试尽可能地推迟样式属性的创建，以便可以将 IDL 属性的一系列更改汇总为内容属性的单个创建/更改。该代码只是省略了在 removeAttribute 调用之前执行创建/更改操作，但对 getAttribute 执行正确。一旦创建了内容属性，removeAttribute 将成功销毁它。
回答by bobylito
As advised on MDN, one should use removeAttribute over setting to null or empty string.
根据MDN 的建议，应该使用 removeAttribute 而不是设置为 null 或空字符串。
It may not work properly though and the solution is to use requestAnimationFrame or setInterval if the less standard browser you want to target doesn't support RAF.
但它可能无法正常工作，如果您想要定位的不太标准的浏览器不支持 RAF，解决方案是使用 requestAnimationFrame 或 setInterval。
回答by Normajean
I was having trouble with removeProperty and removeAttribute. I solved it by writing the original instance of that property/attribute inline in my html instead of my css.
我在使用 removeProperty 和 removeAttribute 时遇到了问题。我通过在我的 html 而不是我的 css 中内联编写该属性/属性的原始实例来解决它。
回答by Joe
It looks like it needs a more time, 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);
}
I'm removingAttribute after a half second.
半秒后我正在删除属性。
回答by BarrieK
I tried calling both the setAttribute()and getAttribute()methods before calling removeAttribute().
在调用 之前，我尝试同时调用setAttribute()和getAttribute()方法removeAttribute()。
It didn't work for me: Neither did setting the style attribute to nothing.
它对我不起作用：也没有将 style 属性设置为空。
What did work was to use the removeAttributeNode()method.
起作用的是使用该removeAttributeNode()方法。
As described here: http://www.w3schools.com/jsref/met_element_removeattributenode.aspthe result will be the same; e.g.
如此处所述：http: //www.w3schools.com/jsref/met_element_removeattributenode.asp结果将是相同的；例如
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) }
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) }
回答by Carlos
Test this
测试这个
div.attributes.removeNamedItem("style");
