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

Question

我正在尝试找到一种使用JavaScript添加/更新属性的方法。 我知道可以使用setAttribute()函数完成，但在IE中无法实现。

- dev.e.loper

Answer 1

你可以在 这里 阅读有关不同浏览器中属性行为的内容，包括IE。 element.setAttribute()应该可以解决问题，即使在IE中也是如此。你试过了吗？如果不起作用，那么element.attributeName = 'value'或许会有用。

- andi

---

这个功能能够创建属性（如果它不存在）并更新属性（如果它已经存在）。这个功能的工作原理有没有记录在某个地方？ - dev.e.loper

@dev.e.loper 开始的好地方是DOM规范：http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/core.html#ID-ElSetAttrNS - valentinas

当我执行以下代码时：document.getElementById("nav").setAttribute("class", "active"); 它在 Chrome 的 JS 控制台中可以正常工作，但在实际页面中却无法正常工作。有什么想法吗？顺便说一下，在实际页面中，我将 .js 文件包含在 body 范围结束之前。 - knownasilya

Answer 2

如果你想要完全兼容，看似简单的事实上很棘手。

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

假设你要添加一个id为'div1'的元素。

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

这些都能工作，除了最后一个在IE 5.5中无法工作（这已经是古老的历史了，但仍然是XP的默认版本且没有更新）。

但当然还有例外情况。 在IE 8之前不起作用：e.attributes['style'] 不会产生错误但也无法设置类名，必须使用className：e['class'] 。
然而，如果你使用属性，这个就能工作了：e.attributes['class']

总之，把属性看作是字面量和面向对象的。在字面量中，你只需要让它输出x ='y' 就行了，不需要考虑其他。这就是attributes、setAttribute和createAttribute的用途（除了IE的style例外）。但因为这些实际上是对象，所以有时候会混淆。

既然你费尽心思地创建了一个DOM元素，而不是使用jQuery的innerHTML方法，我会像对待一个对象一样处理它。所以我会用e.className ='fooClass' 和 e.id ='fooID'。这是一种设计偏好，在这种情况下，试图将其视为其他任何东西都会对你不利。

这种方法永远不会适得其反，但要记住类名是className，样式是一个对象，所以是style.width而不是style="width:50px"。还要记住tagName，但这已经由createElement设置了，因此你不需要担心它。

这篇文章比我想象的长，但在JS中进行CSS操作是棘手的事情。

- JPearce

---

Windows XP使用的浏览器是IE6而不是5.5，如果使用5.5会很糟糕。 - mgol

这适用于 id，而不是像 data-toggle 这样的其他东西。 - stallingOne

Answer 3

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

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

- tvanfosson

---

对于jQuery解决方案的+1。就我而言，由于我的工作要求，我试图避免使用jQuery并使用纯JavaScript来实现它。很高兴两种答案都存在。谢谢。 - NuclearPeon

Answer 4

你想要对属性做什么？它是一个HTML属性还是你自己的东西？

大多数情况下，你可以将其视为属性来处理：想在元素上设置标题吗？element.title = "foo"就可以了。

对于你自己的JS自定义属性，DOM自然是可扩展的（也称expando=true），简单地说，你可以这样做：element.myCustomFlag = foo，并随后无问题地读取它。

- annakata