通过 property 或 setAttribute 设置属性

Question

其中一个比另一个更优选吗？为什么？如果这些被调用数千次，那么性能怎么样？

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

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

Answer 1

一般来说……

使用属性。很长一段时间（直到版本 7 或 8 IIRC）Internet Explorer 的

setAttribute

实现严重损坏，它将设置属性而不是属性（经典的失败点是

class

，因为没有

class

属性（是

className

）。

特别是在这种情况下……

element.setAttribute("disabled", true);

是错误的。应该是

element.setAttribute("disabled", "disabled");

Answer 2

element.setAttribute("disabled", some_bool)

并不像您想象的那样工作。 特别是，从标准角度来看，

disabled

就是所谓的布尔属性；无论其价值如何，它的存在本身就使其成为现实。

disabled=""

、

disabled="disabled"

、

disabled="true"

甚至

disabled="false"

（！！！）在大多数浏览器中都表示相同的意思。 （虽然最后两个实际上是无效的 HTML，但出于真实目的，大多数浏览器会认为它们等同于

disabled="disabled"

。包括四大中的每一个。）您可以通过设置一个值（任何值，甚至是）来将布尔属性设置为 true如果它是假的——并且您通过完全删除该属性将其设置为假。

如果您关心属性的实际字符串值（在本例中您不应该关心），特别是如果该属性尚未通过 DOM 公开（即它没有相应的属性），然后使用

(get/set)Attribute

。 在大多数情况下（特别是如果您关心它如何影响元素，例如您尝试禁用元素的情况），请使用 DOM 属性。

Answer 3

IE 需要使用

setAttribute

设置一些属性，但不是全部。不过我没有清单，你只需检查它是否有效。另外，使用

setAttribute

会将属性放入 DOM 中，因此可以在执行 view source 时显示它。

Answer 4

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

更喜欢 element.className = xxx

Answer 5

它们是设置属性的两种不同方法。每个都有自己的优点和缺点。

1. 属性直接处理数据类型，而

   setAttribute

   始终与字符串交互（请注意您的示例不正确）：

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

2. setAttribute

   按原样使用属性名称，但属性需要一点变化，必须单独查找。例如：

element.setAttribute("class", "my-class");
element.className = "my-class";

3. setAttribute

   按原样使用自定义属性名称（即以

   data-

   开头的名称），但属性将它们放入

   dataset

   属性中：

element.setAttribute("data-my-custom-attr", "abc");
element.dataset.myCustomAttr = "abc";

4. setAttribute

   可能会意外添加无效属性，但属性不会：

element.setAttribute("invalidname", "blah");  // "invalidname"="blah" is added
element.invalidname = "blah";  // doesn't change any attribute

我想说，除非 2 很重要，否则财产是更好的方式。

（缩短并改编自本文的这一部分）