it-swarm.dev

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

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

117
dev.e.loper

您可以阅读 这里 关于许多不同浏览器(包括IE)中属性的行为。

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

154
andi

如果你想要完全兼容,看起来容易的事实上是很棘手的。

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

假设您要添加“div1”的ID。

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

但当然还有突发事件。无法在IE之前工作8: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操作是棘手的事情。

33
JPearce

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

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

你想对这个属性做什么?它是一个html属性还是属于你自己的东西?

大多数情况下,您可以简单地将其作为属性来处理:想要在元素上设置标题? element.title = "foo"会这样做。

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

7
annakata