通过 property 或 setAttribute 设置属性
其中一个比另一个更优选吗?为什么?如果这些被调用数千次,那么性能怎么样?
A) element.setAttribute("disabled", true);
B) element.disabled = true;
它们似乎都禁用了 FF 4 中的 input[text] 元素。
Is one of these more preferable than the other? Why? How about performance--if these are being called thousands of times?
A) element.setAttribute("disabled", true);
B) element.disabled = true;
They both seem to disable an input[text] element in FF 4.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
一般来说......
使用属性。很长一段时间(直到版本 7 或 8 IIRC)Internet Explorer 的
setAttribute
实现存在严重损坏,该实现将设置属性而不是属性(典型的失败点是class 因为没有
class
属性(它是className
)。 > 应该是错误的。
element.setAttribute("已禁用", "已禁用");
In general…
Use properties. For a long time (until version 7 or 8 IIRC) Internet Explorer had a seriously broken implementation of
setAttribute
that would set the property not the attribute (the classic point of failure wasclass
since there is noclass
property (it isclassName
).In this case in particular…
element.setAttribute("disabled", true);
is wrong. It should beelement.setAttribute("disabled", "disabled");
element.setAttribute("disabled", some_bool)
并不像您想象的那样工作。特别是,从标准角度来看,disabled
就是所谓的 布尔属性;无论其价值如何,它的存在本身就使其成为现实。disabled=""
、disabled="disabled"
、disabled="true"
甚至disabled="false"
>(!!!) 在大多数浏览器中都意味着相同的事情。 (尽管最后两个实际上是无效的 HTML,但出于真实目的,大多数浏览器会认为它们等同于disabled="disabled"
。包括四大中的每一个。)您可以通过以下方式将布尔属性设置为 true:设置一个值——任何值,即使它是假的——然后通过完全删除该属性将其设置为假。如果您关心属性的实际字符串值(在本例中您不应该关心),特别是如果该属性尚未通过 DOM 公开(即,它没有相应的属性),那么使用
(get/set)属性
。在大多数情况下(特别是如果您关心它如何影响元素,例如在您尝试禁用元素的情况下),请使用 DOM 属性。element.setAttribute("disabled", some_bool)
doesn't work like you'd think it will. In particular, standardswise,disabled
is what's known as a boolean attribute; its very presence, regardless of its value, makes it true.disabled=""
,disabled="disabled"
,disabled="true"
and evendisabled="false"
(!!!) all mean the same thing in most browsers. (Although the last two are actually invalid HTML, most browsers will consider them equivalent todisabled="disabled"
for truth purposes. Including every one of the Big Four.) You set a boolean attribute to true by setting a value -- any value, even if it's falsy -- and you set it to false by removing the attribute entirely.If you care about the actual string value of the attribute (which in this case you shouldn't), and particularly if the attribute isn't already exposed via the DOM (that is, it doesn't have a corresponding property), then use
(get/set)Attribute
. In most cases (particularly if you care about how it affects the element, like in this case where you're trying to disable an element), use the DOM property.IE 需要使用
setAttribute
设置某些属性,但不是全部。不过我没有清单,你只需检查它是否有效。另外,使用setAttribute
会将属性放入DOM中,因此可以在查看源代码时显示该属性。IE needs some attributes to be set with
setAttribute
, but not all. I don't have a list though, you just have to check if it works or not. Also, usingsetAttribute
will put the attribute in the DOM, so it can be shown when doing view source.只有一个提示:element.setAttribute('class',xxx) 在某些版本的 IE 中不起作用。
更喜欢 element.className = xxx
Only one tip: element.setAttribute('class',xxx) doesnt works in some versions of IE.
Prefer element.className = xxx instead
它们是设置属性的两种不同方法。每个都有自己的优点和缺点。
setAttribute
始终与字符串交互(请注意,您的示例不正确):setAttribute
按原样使用属性名称,但 property 需要一个位变化,必须单独查找。例如:setAttribute
按原样使用自定义属性名称(即以data-
开头的名称),但 property 将它们放入dataset
属性中:setAttribute
可能会意外添加无效属性,但 property 不会:我想说,除非 2 很重要,否则 property 是更好的方法。
(缩短并改编自本文的这一部分)
They are two different ways to set an attribute. Each has their own pros and cons.
setAttribute
always interacts with strings (Note your example isn't correct):setAttribute
uses the attribute name as is, but property requires a bit variation, which must be looked up individually. For example:setAttribute
uses custom attribute names (i.e., those starting withdata-
) as is, but property puts them in adataset
property:setAttribute
may accidentally add an invalid attribute, but property won't:I would say, unless 2 is important, property is a better way.
(Shortened and adapted from this section of this article)