通过 property 或 setAttribute 设置属性答案

【问题标题】：Setting a property via property or setAttribute通过 property 或 setAttribute 设置属性
【发布时间】：2011-11-05 07:30:41
【问题描述】：

其中一个比另一个更可取吗？为什么？性能怎么样——如果这些被调用了数千次？

A) element.setAttribute("disabled", true);
B) element.disabled = true;

他们似乎都在 FF 4 中禁用了 input[text] 元素。

【问题讨论】：

B 当然更惯用。 W3C 的出现使 DOM API 看起来像 Java。 >.
@davidchambers：你更喜欢在后台使用一些奇怪的 getter/setter 魔法？
JavaScript setAttribute vs .attribute= 的可能重复项

标签： javascript dom

【解决方案1】：

一般…

使用属性。很长一段时间（直到第 7 版或第 8 版 IIRC）Internet Explorer 的 setAttribute 实现严重损坏，它会设置属性而不是属性（经典的失败点是 class，因为没有 class 属性（是className)。

尤其是在这种情况下……element.setAttribute("disabled", true); 是错误的。应该是element.setAttribute("disabled", "disabled");

【讨论】：

你确定这不正确？ W3.org 表示此属性是布尔值。当然，两者都有效。
@Amaan — 描述 DOM API（因此是 disabled property，所以它是 element.disabled = true/false）
哦。我认为它对 setAttribute 的工作方式类似。我猜我错了。
@Quentin - element.setAttribute("disabled", true) 不是“错误的”。 disabled 属性没有值，第二个参数无关紧要，因此任何值都可以（即使是空字符串，或者根本没有）。重要的是属性的存在，而不是它的值。
@RobG — 它确实有一个值（“disabled”），您只可以在编写标记时不使用名称（就像您可以在 @987654331 上不使用结束标记一样@ 并去掉 <body> 的开始和结束标签。

【解决方案2】：

element.setAttribute("disabled", some_bool) 不会像你想象的那样工作。特别是在标准方面，disabled 就是所谓的boolean attribute；它的存在，无论其价值如何，都使它成为现实。 disabled=""、disabled="disabled"、disabled="true" 甚至 disabled="false"(!!!) 在大多数浏览器中都表示相同的意思。（尽管最后两个实际上是无效的 HTML，但大多数浏览器会认为它们等同于 disabled="disabled" 以达到真实目的。包括四大中的每一个。）您可以通过设置一个值来将布尔属性设置为 true —— 任何值，甚至如果它是假的——并且你通过完全删除该属性将它设置为假。

如果您关心属性的实际字符串值（在这种情况下您不应该这样做），特别是如果该属性尚未通过 DOM 公开（也就是说，它没有相应的属性)，然后使用(get/set)Attribute。在大多数情况下（特别是如果您关心它如何影响元素，例如在这种情况下您尝试禁用元素），请使用 DOM 属性。

【讨论】：

XHTML 只会验证boolean="boolean"。 HTML 4.01 将仅验证 boolean 和 boolean="boolean"。 HTML 5 将验证 boolean、boolean="" 和 boolean="boolean"。它们根本不是一回事。 boolean="true" 不会在其中任何一个中验证。这是非法的。
我提到了浏览器的作用，而不是验证的作用。 :) 有效与否，这四个在我可以访问的每个浏览器（IE7-9、FF7、Chrome 14 和 Opera 11.52）中都是等效的。 即使文档具有 XHTML Strict doctype 和 .xhtml 扩展名。 有些检查格式是否正确，但没有他们抱怨“禁用”属性的值 - - 他们只关心它有一个（因为 XML 的规则）。

【解决方案3】：

IE 需要用setAttribute 设置一些属性，但不是全部。不过我没有清单，你只需要检查它是否有效。另外，使用setAttribute会将属性放在DOM中，所以可以在查看源代码时显示。

【讨论】：

我从来没有听说过 IE 需要 setAttribute 来做任何事情，恰恰相反，view source 显示 source 不是实时 DOM 的序列化。跨度>
@Quentin 在瑞典的时间还早，也许正好相反。但我最近做了一项功能，我必须使用setAttribute，否则它不能在一个浏览器中工作，但现在我似乎不记得是哪个，IE 还是 FF。 ://
@Joachim - IE 中的 get/setAttribute 有各种怪癖。此外，Firefox 不会为非标准属性创建 DOM 属性，因此您必须使用 getAttribute。一团糟。最好只使用具有标准属性的属性访问，并完全避免使用非标准属性。

【解决方案4】：

只有一个提示：element.setAttribute('class',xxx) 在某些版本的 IE 中不起作用。

更喜欢 element.className = xxx

【讨论】：