使用 setAttribute() 附加新属性？

我有一个 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 将样式附加到元素？

Thanks!

好吧，如果使用setAttribute你可以只取之前的值getAttribute并将它们连接起来：

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

然而，对于大多数 HTML 属性来说，这并不是最佳实践，它们通常反映为属性，您可以执行类似的操作element.className += " …"。特别是对于内联样式，您可以使用.style财产允许您设置和取消设置每个 CSS 属性：

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