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

javascript html cross-browser

2022-08-30 04:33:08

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

答案 1

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

element.setAttribute()应该做这个把戏，即使在IE中也是如此。你试过吗？如果它不起作用，那么也许可能有效。element.attributeName = 'value'

答案 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 中不起作用：不会出错，但不会实际设置类，它必须是 className：。
但是，如果您使用的是属性，那么这将起作用：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操作是棘手的业务。