setAttribute（W3C DOM核心方法）

Returns 退货

void void

Throws 投掷

INVALID_CHARACTER_ERR, INVALID_CHARACTER_ERR ， NO_MODIFICATION_ALLOWED_ERR NO_MODIFICATION_ALLOWED_ERR

例 (Example)

element.setAttribute('rel', 'me');

The example above sets a rel attribute with the value me on an element.

上面的示例在一个元素上设置一个rel属性，其值为me 。

So if the element in question were this HTML:

因此，如果所讨论的元素是以下HTML：

<a href="http://www.brothercake.com/">brothercake</a>

Then the operation above would result in this:

然后上面的操作将导致以下结果：

<a href="http://www.brothercake.com/" rel="me">brothercake</a>

争论 (Arguments)

name ( 名称 ( DOMStringDOMString
required
需要

The name of the attribute to create or alter.

要创建或更改的属性的name 。

value ( 值 ( DOMStringDOMString
required
需要

The string value for the attribute.

属性的字符串value 。

描述 (Description)

Set a new attribute with the specified name and value to this element.

为该元素设置具有指定名称和值的新属性。

If an attribute already exists with the specified name, its value is replaced.

如果属性已经存在且具有指定名称，则其value被替换。

When setting a value, the value is not parsed, so any entity references or other markup will be treated as literal text. To create an attribute containing entities the specification suggests to create an Attr node with appropriate Text and EntityReference nodes as children, then add it to an element using setAttributeNode, however in practise this rarely works (see Attr for details).

设置值时，不会解析该值，因此任何实体引用或其他标记都将被视为文字文本。 为了创建包含实体的属性，规范建议创建一个Attr节点，并将适当的Text和EntityReference节点作为子节点，然后使用setAttributeNode将其添加到元素中，但是实际上这很少起作用(有关详细信息，请参见Attr )。

This method is for working with non-namespaced attributes; to add a namespaced attribute, use the DOM 2 setAttributeNS method instead.

此方法用于处理非命名空间的属性。 要添加命名空间属性，请改用DOM 2 setAttributeNS方法。

使用驼峰式属性名称时要小心 (Be careful with camel-cased attribute names)

You should be careful using camel-cased names in code intended for all browsers, because in Opera in XHTML mode, setting an attribute with a camel-cased name may affect its corresponding DOM property. For example, if you set an attribute called tabIndex to any value, it will have the effect of resetting the tabIndex property to 0 (its default value), removing the original tabindex attribute entirely, and creating a new attribute with the name tabIndex and the specified string value.

您应小心谨慎地在适用于所有浏览器的代码中使用驼峰式名称，因为在XHTML模式的Opera中，用驼峰式名称设置属性可能会影响其相应的DOM属性。 例如，如果将一个名为tabIndex的属性设置为任何值，它将具有以下效果：将tabIndex属性重置为0(默认值)，完全删除原始的tabindex属性，并使用名称tabIndex和指定的字符串值。

This behavior is probably down to an inconsistency in how case-sensitivity is handled in XHTML mode. In other browsers (Firefox and Safari) doing this will create a new attribute called tabIndex, while leaving the original tabindex attribute and its corresponding tabIndex property unchanged.

此行为可能归因于XHTML模式下如何区分大小写。 在其他浏览器(Firefox和Safari)中，这样做会创建一个名为tabIndex的新属性，而原始的tabindex属性及其对应的tabIndex属性保持不变。

This note only applies to these browsers in XHTML mode — in HTML mode2 the name argument is case-insensitive, so tabIndex is treated as tabindex.

本说明仅适用于XHTML模式下的这些浏览器-在HTML模式2下，name参数不区分大小写，因此tabIndex被视为tabindex。

Additionally, IE in HTML cannot set the type attribute of an input element — attempting to do so will throw an error (This command is not supported). It also can’t set the style attribute (doing so simply has no effect), and cannot set event-handling attributes as strings (to do so has no effect, unless that element already has an event-handling attribute of the same name, in which the case the operation to set a new one will remove the old one, leaving nothing — although getAttribute will subsequently return the string value that was set, there won’t actually be an active event handler on the element). IE can, however, set event-handling attributes if a function is passed as the value argument, rather than a string:

此外，HTML中的IE无法设置输入元素的type属性-尝试这样做会引发错误(不支持此命令)。 它还不能设置样式属性(这样做根本无效)，也不能将事件处理属性设置为字符串(这样做无效，除非该元素已经具有相同名称的事件处理属性，在这种情况下，设置一个新操作的操作将删除旧操作，而不会留下任何内容-尽管getAttribute随后会返回设置的字符串值，但实际上该元素上没有活动的事件处理程序)。 但是，如果将函数作为值参数而不是字符串传递，则IE可以设置事件处理属性：

element.setAttribute('onclick', function() { alert("this works!"); });

Finally, if this method is used to set the src attribute of an image, the value that’s subsequently returned from getAttribute will be a fully qualified URI; this is the same as its behavior when retrieving an src that’s been set in static HTML. However when setting the href of a link, the value that’s subsequently returned will be the literal value that was set; this is different from its behavior with static HTML in which the value is returned as a qualified URI.

最后，如果使用此方法设置图片的src属性，则随后从getAttribute返回的值将是完全限定的URI； 这与检索在静态HTML中设置的src时的行为相同。 但是，在设置链接的href时，随后返回的值将是所设置的文字值。 这与静态HTML的行为不同，在静态HTML中，该值作为限定的URI返回。

我怎么知道它是否有效？ (How do I know if it works?)

Establishing whether this method works as expected is particularly difficult, because it’s possible to set an attribute of any name at all, though it may not be the attribute you expect. For example, in Internet Explorer you can still set an attribute called class, and subsequently retrieve it with getAttribute(‘class’), but it will not correspond with the className property — it will be an entirely separate attribute that makes no visual difference to the element.

确定此方法是否按预期工作特别困难，因为尽管可能不是您期望的属性，但可以设置任何名称的属性。 例如，在Internet Explorer中，您仍然可以设置一个名为class的属性，然后使用getAttribute('class')对其进行检索，但是它不会与className属性相对应-它是一个完全独立的属性，不会对外观造成任何影响元素。

In all browsers an attribute which evaluates to a boolean (such as disabled) can only be set to true — setting it to false has no effect. This is correct behavior, and is because such attributes should only have one possible value (ie. disabled=”disabled”), or are not defined (so negating them should be done with removeAttribute). In Opera 9.5, Firefox and Safari the attribute value will subsequently return as false but the element will still be disabled, in Opera 9.0 the value will continue to return as disabled, and in Internet Explorer the value will continue to return as boolean true; these are accurate reflections of the state of the element, even if they are a little confusing! However since IE considers these attributes to have an actual boolean value, the value can be toggled (and the element disabled and enabled accordingly) by setting it as a boolean rather than a string:

在所有浏览器中，只能将评估为布尔值的属性(例如禁用的属性)设置为true-将其设置为false无效。 这是正确的行为，这是因为此类属性应仅具有一个可能的值(即，disable =“ disabled”)或未定义(因此，应使用removeAttribute对其进行否定)。 在Opera 9.5，Firefox和Safari中，属性值随后将返回false，但仍将禁用该元素；在Opera 9.0中，该值将继续以禁用状态返回；在Internet Explorer中，该值将继续以布尔值true返回； 这些是元素状态的准确反映，即使有些令人困惑！ 但是，由于IE认为这些属性具有实际的布尔值，因此可以通过将其设置为布尔值而不是字符串来切换(并相应地禁用和启用该元素)：

element.setAttribute('disabled', false);

Internet Explorer implements a second argument to setAttribute, which is a case-sensitivity flag that can take the value 0 (case-insensitive) or 1 (default, case-sensitive). This argument works as expected in IE, and does not affect any other browser.

Internet Explorer为setAttribute实现了第二个参数，它是一个区分大小写的标志，可以采用值0(不区分大小写)或1(默认值，区分大小写)。 此参数在IE中按预期工作，并且不会影响任何其他浏览器。

翻译自: https://www.sitepoint.com/setattribute-w3c-dom-core-method/