Question

我有一个div元素，并希望为它添加新的样式属性。我试过这样做：

element.setAttribute('style', 'property: value');

它有效，但是如果该元素已经应用了样式，那么它们都会被覆盖。

让我说我有这种情况：

HTML：

<div id="styled"></div>

JavaScript的：

var styled = document.getElementById('styled');
styled.setAttribute('style', 'display: block');

这样可行，但如果我需要附加另一种风格，请说：

styled.setAttribute('style', 'color: red');

然后我会丢失先前setAttribute（）方法中添加的样式！

如何使用JavaScript将样式附加到元素？

谢谢！

Answer 1

好吧，如果使用setAttribute，您可以将getAttribute的前一个值取下来并连接它们：

 element.setAttribute('style', element.getAttribute('style')+'; color: red');

但是，对于大多数HTML属性而言，这不是最佳做法，这些属性通常反映为属性，您可以执行element.className += " …"之类的操作。特别是对于内联样式，您可以使用允许您设置和取消设置每个CSS属性的.style property：

element.style.display = 'block';
element.style.color = 'red';

Answer 2

更新dom节点的style对象，而不是使用setAttribute：

document.getElementById("styled").style["color"] = "red";

更多信息：http://www.w3schools.com/jsref/dom_obj_style.asp

Answer 3

如果要添加样式，可以使用样式属性直接设置样式：

var foo = document.getElementById('foo');

foo.style.backgroundColor = 'red';
foo.style.width = '400px';
foo.style.height = '500px';
foo.style.fontWeight = 'bold';

Answer 4

当您使用setAttribute时，您将替换整个style属性，因此您将丢失已存在的任何样式。您需要将您的添加内容连接到旧样式。

oldStyle = styled.getAttribute('style');
styled.setAttribute('style', oldStyle + 'color: red;');

但是使用style属性的子属性更简单：

styled.style.color = 'red';
styled.style.display = 'block';

如果需要从变量中获取样式名称，可以使用数组表示法：

styleName = 'color';
styleValue = 'red';
styled.style[styleName] = styleValue;

使用setAttribute（）附加新属性？

4 个答案: