如何使用 JavaScript 向 HTML 元素添加/更新属性？答案

【问题标题】：How to add/update an attribute to an HTML element using JavaScript?如何使用 JavaScript 向 HTML 元素添加/更新属性？
【发布时间】：2010-10-17 03:40:10
【问题描述】：

我正在尝试找到一种使用 JavaScript 添加/更新属性的方法。我知道我可以使用 setAttribute() 函数来做到这一点，但这在 IE 中不起作用。

【问题讨论】：

标签： javascript html cross-browser

【解决方案1】：

您可以阅读here，了解许多不同浏览器（包括 IE）中的属性行为。

element.setAttribute() 应该可以解决问题，即使在 IE 中也是如此。你试过了吗？如果它不起作用，那么也许 element.attributeName = 'value' 可能会起作用。

【讨论】：

这行得通。如果属性不存在则创建属性，如果存在则更新。就其工作原理而言，这是否记录在某处？
@dev.e.loper DOM 规范是一个很好的起点：w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/…
当我执行以下操作时：document.getElementById("nav").setAttribute("class", "active"); 它可以在 Chrome JS 控制台中运行，但在实际页面中它不起作用..有什么想法吗？顺便说一句，在实际页面中，我在 body 范围结束之前包含了 .js 文件。

【解决方案2】：

如果你想完全兼容，看起来容易实际上很棘手。

var e = document.createElement('div');

假设您要添加一个 'div1' 的 id。

e['id'] = 'div1';
e.id = 'div1';
e.attributes['id'] = 'div1';
e.createAttribute('id','div1')

除了 IE 5.5 中的最后一个（此时这是古老的历史，但仍然是 XP 的默认设置，没有更新），这些都可以工作。

但当然也有偶然性。 8:e.attributes['style']之前无法在IE中工作不会出错但不会真正设置类，它必须是 className:e['class'] .
但是，如果您使用的是属性，那么这将起作用：e.attributes['class']

总而言之，将属性视为文字和面向对象。

从字面上看，您只是希望它吐出 x='y' 而不要考虑它。这就是attributes、setAttribute、createAttribute的作用（除了IE的style例外）。但是因为这些确实是对象，所以事情可能会变得混乱。

由于您将麻烦地正确创建一个 DOM 元素而不是 jQuery innerHTML slop，因此我会像对待它一样对待它并坚持使用 e.className = 'fooClass' 和 e.id = 'fooID'。这是一种设计偏好，但在这种情况下，尝试将其视为对象以外的任何事物都对您不利。

它永远不会像其他方法那样适得其反，只要注意类是类名，样式是一个对象，所以它是 style.width 而不是 style="width:50px"。还要记住 tagName ，但它已经由 createElement 设置，所以你不必担心它。

这比我想要的要长，但是 JS 中的 CSS 操作是一件棘手的事情。

【讨论】：

Windows XP 退出了 IE6，而不是 5.5。那太可怕了。
这适用于id，不适用于data-toggle之类的其他东西

【解决方案3】：

必填jQuery solution。查找 title 属性并将其设置为 foo。请注意，这会选择单个元素，因为我是通过 id 进行的，但是您可以通过更改选择器轻松地在集合上设置相同的属性。

$('#element').attr( 'title', 'foo' );

【讨论】：

+1 用于 jQuery 解决方案。就我而言，由于我的工作要求，我试图避免使用 jQuery 并用纯 javascript 生成它。我很高兴这两个答案都存在。谢谢。

【解决方案4】：

你想用这个属性做什么？是html属性还是你自己的东西？

大多数时候，您可以简单地将其作为一个属性来处理：想要为元素设置标题？ element.title = "foo" 会做到的。

对于您自己的自定义 JS 属性，DOM 自然是可扩展的（又名 expando=true），其简单结果是您可以执行 element.myCustomFlag = foo 并随后毫无问题地读取它。

【讨论】：