setAttribute（W3C DOM CORE方法）-js教程-PHP中文网

setAttribute (W3C DOM Core method)

setAttribute（W3C DOM CORE方法）

void

throws

invalid_character_err，no_modification_allowed_err

钥匙要点

允许开发人员在HTML元素中添加，更改或更新属性及其值。它是文档对象模型（DOM）的一部分，它采用两个参数：属性名称及其值。
setAttribute方法对病例敏感，可用于修改CSS样式和自定义数据属性。但是，对于事件处理程序，建议使用AddEventListener方法而不是setAttribute。

>示例

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

登录后复制

上面的示例在元素上设置了带有值me的rel属性。

因此

然后上面的操作将导致以下内容：

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

登录后复制

参数

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

登录后复制

名称

（DOMSTRING）必需的

>属性的名称创建或更改。: value
（domstring）必需的
>>的字符串值属性。: 描述

如果已经存在指定名称的属性，则更换其值。

设置值时，该值不会解析，因此任何实体参考或其他标记都将被视为字面文本。为了创建一个包含实体的属性，规范建议创建一个带有适当文本和EntityRereference节点的属性节点，然后使用setAttributenode将其添加到元素中，但是实际上，这种很少有效（有关详细信息，请参见attr）。

此方法用于使用非命名置属性；要添加名称属性属性，请改用DOM 2 setAttributens方法。

请小心骆驼级的属性名称

>您应该在所有浏览器的代码中使用骆驼的名称，因为在XHTML模式下的Opera中，设置带有骆驼名称的属性可能会影响其相应的DOM属性。例如，如果将一个称为TabIndex的属性设置为任何值，它将具有将Tabindex属性重置为0（其默认值），完全删除原始Tabindex属性的效果指定的字符串值。

这种行为可能归结为在XHTML模式下如何处理病例敏感性的不一致性。在其他浏览器（Firefox和Safari）中，执行此操作将创建一个名为TabIndex的新属性，而将原始的Tabindex属性及其相应的Tabindex属性保持不变。
此注释仅适用于XHTML模式下的这些浏览器 - 在HTML模式中，名称参数是对案例不敏感的，因此Tabindex被视为Tabindex。
>此外，IE中的IE无法设置输入元素的类型属性 - 尝试这样做会引发错误（不支持此命令）。它也无法设置样式属性（这样做根本没有效果），也不能将事件处理属性设置为字符串（这样做没有效果，除非该元素已经具有相同名称的事件处理属性，否则在这种情况下，设置新操作将删除旧的操作，但什么也没留下 - 尽管getAttribute随后会返回设置的字符串值，但实际上不会在元素上有一个活动的事件处理程序）。但是，如果将函数作为值参数传递，而不是字符串：
>，则可以设置事件处理属性。

最后，如果使用此方法设置图像的SRC属性，则随后从getAttribute返回的值将是完全合格的URI；当检索静态HTML设置的SRC时，这与其行为相同。但是，在设置链接的HREF时，随后返回的值将是设置的字面价值。这与静态HTML的行为不同，其中该值被返回为合格的URI。

我怎么知道它是否有效？

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

登录后复制

确定此方法是否按预期工作特别困难，因为可以完全设置任何名称的属性，尽管这可能不是您期望的属性。例如，在Internet Explorer中，您仍然可以设置一个称为类的属性，然后使用getAttribute（'class'）检索它，但它不会与className属性相对应 - 它将是一个完全独立的属性，对视觉上的差异没有任何视觉上的差异。元素。

在所有浏览器中，

在所有评估布尔值（例如残疾人）评估的属性只能设置为true - 将其设置为false没有效果。这是正确的行为，是因为此类属性应只有一个可能的值（即禁用=“禁用”），或者未定义（因此应使用removeatTribute进行否定）。在Opera 9.5中，Firefox和Safari属性值随后将作为false返回，但该元素仍将被禁用，在Opera 9.0中，该值将继续返回作为残疾人，并且在Internet Explorer中，该值将继续返回为Boolean true；这些是对元素状态的准确反思，即使它们有些混乱！但是，由于IE认为这些属性具有实际的布尔值，因此可以通过将其设置为布尔而不是字符串来切换该值（以及相应地禁用和启用的元素）：

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

登录后复制

Internet Explorer实现了第二个参数，这是一个可以将值0（不敏感）或1（默认为case敏感）的情况敏感性标志。该论点在IE中的预期工作，并且不会影响任何其他浏览器。

经常询问有关setAttribute w3c dom core方法

的问题

> JavaScript中的setAttribute方法是什么？此方法用于在HTML元素中添加，更改或更新属性及其值。它采用两个参数：属性名称及其值。例如，如果要更改文本的颜色，则可以使用setAttribute修改元素的样式属性。

setAttribute与getAttribute有何不同？为了添加或更改属性的值，使用getAttribute来检索属性的值。两者都是DOM中元素接口的方法。它们共同努力，使开发人员可以与HTML元素进行交互和操纵。

>我可以使用setAttribute修改CSS样式吗？该方法可以更改包含CSS属性的HTML元素的样式属性。但是，重要的是要注意，使用setAttribute将覆盖任何现有的内联样式。如果要更改特定的样式属性而不影响他人，则最好使用元素的样式属性。

如果属性不存在，会发生什么？存在，setAttribute方法将用指定的值创建它。这是setAttribute如此强大的原因之一：它允许开发人员动态添加属性到HTML元素。

>我可以将setAttribute与自定义数据属性一起使用吗？当您需要存储没有任何视觉表示的额外信息时，这一点特别有用。只需记住将属性名称带有“ data-”以符合HTML5标准。这意味着“班级”和“班级”将被视为两个不同的属性。始终确保使用属性时使用正确的情况。

>我可以使用setAttribute添加事件处理程序吗？

>

在技术上可以使用setAttribute添加事件处理程序，但不推荐使用。这是因为事件属性的值始终是字符串，这意味着您无法将函数直接分配为事件处理程序。取而代之的是，使用AddEventListener方法，该方法是专门为此目的设计的。

> setAttribute是否可以与所有HTML元素一起使用吗？

是的，setAttribute可与所有HTML元素一起使用。但是，并非所有属性都适用于所有元素。例如，“ src”属性与“ img”元素相关，而与“ p”元素无关。

> setAttribute的一些常见用例？动态更改HTML元素的外观或行为。例如，您可以使用它来更改文本的颜色，向图像添加边框或更改图像的来源。它也用于添加自定义数据属性。

是否有setAttribute的替代方法？例如，您可以直接修改HTML元素的属性。这通常比使用SetAttribute更简单，更直观。但是，setAttribute具有能够使用任何属性（包括自定义数据属性）的优势。

。

以上是setAttribute（W3C DOM CORE方法）的详细内容。更多信息请关注PHP中文网其他相关文章！