通过 property 或 setAttribute 设置属性

发布于 2024-12-13 19:54:26 字数 181 浏览 0 评论 0原文

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

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

你的往事 2024-12-20 19:54:26

一般来说......

使用属性。很长一段时间(直到版本 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 was class since there is no class property (it is className).

In this case in particular… element.setAttribute("disabled", true); is wrong. It should be element.setAttribute("disabled", "disabled");

无敌元气妹 2024-12-20 19:54:26

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 even disabled="false"(!!!) all mean the same thing in most browsers. (Although the last two are actually invalid HTML, most browsers will consider them equivalent to disabled="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.

影子是时光的心 2024-12-20 19:54:26

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, using setAttribute will put the attribute in the DOM, so it can be shown when doing view source.

花之痕靓丽 2024-12-20 19:54:26

只有一个提示: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

半岛未凉 2024-12-20 19:54:26

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

  1. Property 直接处理数据类型,而 setAttribute 始终与字符串交互(请注意,您的示例不正确):
element.setAttribute("disabled", "disabled");
element.disabled = true;
  1. setAttribute 按原样使用属性名称,但 property 需要一个位变化,必须单独查找。例如:
element.setAttribute("class", "my-class");
element.className = "my-class";
  1. setAttribute 按原样使用自定义属性名称(即以 data- 开头的名称),但 property 将它们放入 dataset 属性中:
element.setAttribute("data-my-custom-attr", "abc");
element.dataset.myCustomAttr = "abc";
  1. setAttribute 可能会意外添加无效属性,但 property 不会:
element.setAttribute("invalidname", "blah");  // "invalidname"="blah" is added
element.invalidname = "blah";  // doesn't change any attribute

我想说,除非 2 很重要,否则 property 是更好的方法。

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

They are two different ways to set an attribute. Each has their own pros and cons.

  1. Property deals with the data type directly, while setAttribute always interacts with strings (Note your example isn't correct):
element.setAttribute("disabled", "disabled");
element.disabled = true;
  1. setAttribute uses the attribute name as is, but property requires a bit variation, which must be looked up individually. For example:
element.setAttribute("class", "my-class");
element.className = "my-class";
  1. setAttribute uses custom attribute names (i.e., those starting with data-) as is, but property puts them in a dataset property:
element.setAttribute("data-my-custom-attr", "abc");
element.dataset.myCustomAttr = "abc";
  1. setAttribute may accidentally add an invalid attribute, but property won't:
element.setAttribute("invalidname", "blah");  // "invalidname"="blah" is added
element.invalidname = "blah";  // doesn't change any attribute

I would say, unless 2 is important, property is a better way.

(Shortened and adapted from this section of this article)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文