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

Question

如何使用JavaScript将属性添加/更新到HTML元素？我正在尝试找到一种使用JavaScript添加/更新属性的方法。我知道我可以用setAttribute()功能来做，但这在IE中不起作用。

Answer 1

您可以在此处阅读许多不同浏览器中属性的行为，包括IE。

element.setAttribute()应该做的，即使在IE中。你试过吗？如果它不起作用，那么也许element.attributeName = 'value'可行。

Answer 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之前的IE中不会工作：e.attributes['style'] 不会出错而是实际上不会设置类，它必须是className : e['class']. 
但是，如果你正在使用属性，那么这将工作：e.attributes['class']

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

在字面上，你只是希望它吐出x ='y'而不考虑它。这是属性，setAttribute，createAttribute的用途（IE的样式异常除外）。但因为这些都是对象，所以事情可能会变得混乱。

因为你要正确地创建一个DOM元素而不是jQuery innerHTML slop，我会把它视为一个并坚持使用e.className ='fooClass'和e.id ='fooID'。这是一个设计偏好，但在这种情况下，尝试对待除了对象之外的其他任何东西。

它永远不会像其他方法那样适得其反，只要知道class是className而style是一个对象，所以它的style.width not style =“width：50px”。还要记住tagName，但这已经由createElement设置，所以你不必担心它。

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

Answer 3

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

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