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


128

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

Answers:


163

您可以在此处阅读有关许多不同浏览器(包括IE)中属性的行为的信息。

element.setAttribute()即使在IE中也应该做到这一点。你试过了吗?如果它不起作用,则可能 element.attributeName = 'value'会起作用。


5
这可行。如果属性不存在,它将创建属性,如果属性存在则将对其进行更新。在此如何工作的地方有记载?
dev.e.loper

@ dev.e.loper DOM规范是一个不错的起点:w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/…–
valentinas

1
当我执行以下操作时:document.getElementById("nav").setAttribute("class", "active");它可以在Chrome JS控制台中使用,但是在实际页面中却不起作用。顺便说一句,在实际页面中,我.jsbody范围末尾之前包含了文件。
已知资料2012年

36

如果您想完全兼容,那么看起来容易的事情实际上是棘手的。

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'] 不会出错,但不会实际设置类,它必须是产品类别:e['class']
但是,如果您使用的是属性,那么它将起作用:e.attributes['class']

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

从字面上看,您只希望它吐出x ='y'而不考虑它。这就是属性setAttribute和createAttribute的用途(IE的样式异常除外)。但是由于这些对象确实是对象,因此可能会造成混淆。

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

它永远不会像其他方法那样适得其反,只要知道类是className,样式就是对象,所以它是style.width而不是style =“ width:50px”。还要记住tagName,但这已经由createElement设置,因此您不必担心它。

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


5
Windows XP使用的是IE6,而不是5.5。那太可怕了。
mgol 2012年

这适用于id,而不适用于其他类似的东西data-toggle
–stallingOne,

30

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

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

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

7

您想对属性做什么?它是html属性还是您自己的东西?

大多数时候,您可以简单地将其作为属性来处理:是否要在元素上设置标题?element.title = "foo"会做的。

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

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.