removeAttribute() 不适用于 DOM
为什么 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>
Why doesn't removeAttribute() remove anything in the following code:
<!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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
只需在removeAttribute(“style”)之前调用getAttribute(“style”)即可。
例如，
请参阅 http://jsfiddle.net/qTv22/
这看起来非常像 Chrome JS 优化错误。尽管 HTML5 规范说
Chrome 试图尽可能推迟样式属性的创建，以便 IDL 属性的一系列突变可以汇总到内容属性的单个创建/更改中。该代码只是省略了在调用removeAttribute之前执行创建/更改操作，但对getAttribute执行正确。创建内容属性后，removeAttribute 将成功销毁它。
Just call getAttribute("style") before removeAttribute("style").
e.g.
See http://jsfiddle.net/qTv22/
This looks very much like a Chrome JS optimization bug. Although the HTML5 spec says
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.
问题是您在 DOM 更新之前立即进行所有这些更改。相反，请考虑实际将样式属性设置为空，请参阅此处
The problem is you are making all these changes at once before the DOM updates. Instead consider actually setting the style attribute to nothing see here
正如MDN 上的建议，应该使用removeAttribute而不是设置为 null 或空字符串。
但它可能无法正常工作，如果您想要定位的不太标准的浏览器不支持 RAF，解决方案是使用 requestAnimationFrame 或 setInterval。
As advised on MDN, one should use removeAttribute over setting to null or empty string.
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.
看起来需要更多时间，示例
我在半年后删除属性第二。
It looks like it needs a more time, example
I'm removingAttribute after a half second.
测试一下
Test this
我在使用removeProperty 和removeAttribute 时遇到问题。我通过在 html 而不是 css 中内联写入该属性/属性的原始实例来解决这个问题。
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.
我尝试在调用
removeAttribute()之前调用setAttribute()和getAttribute()方法。它对我不起作用：将样式属性设置为空也不起作用。
有效的是使用
removeAttributeNode()方法。如下所述： http://www.w3schools.com/jsref/met_element_removeattributenode.asp结果是一样的；例如
I tried calling both the
setAttribute()andgetAttribute()methods before callingremoveAttribute().It didn't work for me: Neither did setting the style attribute to nothing.
What did work was to use the
removeAttributeNode()method.As described here: http://www.w3schools.com/jsref/met_element_removeattributenode.asp the result will be the same; e.g.