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

Question

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

dev*_*per 123 html javascript cross-browser

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

Answer 1

and*_*ndi 160

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

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

通过'this works'我的意思是element.attributeName ='value' (12认同)
这很有效.如果属性不存在则创建属性,如果属性存在则更新属性.就这是如何工作的？ (5认同)
当我执行以下操作时：`document.getElementById("nav").setAttribute("class", "active");` 它在 Chrome JS 控制台中工作，但在实际页面中它不起作用......任何想法? 顺便说一下，在实际页面中，我在 `body` 范围结束之前包含了 `.js` 文件。 (2认同)

Answer 2

JPe*_*rce 35

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

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操作是棘手的事情.

        
          
          
              Windows XP推出了IE6,而不是5.5.那太可怕了. (5认同)

Answer 3

tva*_*son 30

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

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

Run Code Online (Sandbox Code Playgroud)

jQuery解决方案的+1.在我的情况下,由于我的工作要求,我试图避免使用jQuery并在纯javascript中生成它.我很高兴两个答案都存在.谢谢. (2认同)

Answer 4

ann*_*ata 7

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

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

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

归档时间：	16 年，6 月前
查看次数：	308943 次
最近记录：	8 年，3 月前