WebKit 和 Gecko 的风格行为差异答案

【问题标题】：Style behavior difference between WebKit and GeckoWebKit 和 Gecko 的风格行为差异
【发布时间】：2011-03-27 01:01:10
【问题描述】：

当我注意到一些奇怪的行为时，我正在开发一个 Web 应用程序。我有一个元素，其样式通过 JavaScript style 属性应用。之后，我尝试使用removeAttribute("style") 删除元素上应用的所有样式。这仅适用于 Gecko。 WebKit 什么都不做。

我发现了一种解决方法（在删除属性之前使用 setAttribute("style", "")），但我不明白为什么在 WebKit 上需要 setAttribute 而不是 Gecko。为什么？

我有一个 here 行为示例。 尝试注释掉 setAttribute 行，看看 Gecko 和 WebKit 之间的行为有何不同。

【问题讨论】：

您正在编辑 DOM 属性，而不是 HTML 属性。尝试将.style.background 设置为空。此外，将属性设置为空字符串并不是删除它的可靠方法。
@Matt：我曾假设更新 DOM 属性也会更新 HTML 属性以反映这一点。其次，我将其设置为空，然后也将其删除，而不仅仅是将其设置为空。
这不是我第一次看到removeAttribute 与setAttribute 有不同的行为，带有一个空字符串；我正在考虑的情况是尝试删除内联事件侦听器。（在这种情况下，setAttribute 引起了 JavaScript 严格警告，因此并不理想。）

标签： javascript html css webkit gecko

【解决方案1】：

这取决于你如何设置属性？

var test=document.getElementById("test");
//test.style.background="green";
test.setAttribute("style", "background: green");
test.removeAttribute("style");

我将第二行注释掉，因为它是更改该特定属性的另一种方式。

现在第四行在 webkit 中正常工作（使用 google chrome 开发频道），当我将其注释掉时，//test.removeAttribute("style")，第三行的框保持绿色。

【讨论】：

没错，我知道这取决于我如何设置属性，但我的问题是，如果属性是通过style 属性设置的，为什么删除该属性不起作用？
它不起作用，因为您没有设置属性。您正在设置一个属性。 id 和 className 等一些基本属性会同时更新，但大多数属性不会同时更新属性和属性。更多信息请看这里：stackoverflow.com/questions/3953028/…
@Matt：有趣的是，如果我在alert(test.getAttribute("style")); 设置了style 属性后立即输入，则表明该属性已适当更新。它似乎也使removeAttribute 按预期工作（如setAttribute），这本身是出乎意料的。