使用setAttribute()附加新属性？

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 += " …".特别是对于内嵌样式,你会使用.style属性,允许您设置和取消每一个CSS属性:

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