如何在 JavaScript 中为元素添加样式

摘要：在本教程中，您将学习如何使用 JavaScript DOM 方法为元素添加样式。

假设您有一个如下所示的<div>元素

<div class="note">JavaScript CSS</div>Code language: HTML, XML (xml)

并且您希望为该元素添加样式。通过使用 JavaScript DOM 方法，您可以为元素添加内联样式或全局样式。

内联样式

要为元素添加内联样式，请执行以下步骤

• 首先，使用 DOM 方法（如document.querySelector()）选择该元素。选定的元素具有style属性，允许您为该元素设置各种样式。
• 然后，设置style对象的属性值。

以下代码更改了上面<div>元素的背景颜色和颜色

const note = document.querySelector('.note');
note.style.backgroundColor = 'yellow';
note.style.color = 'red';Code language: JavaScript (javascript)

1) 使用 cssText 属性

添加单个样式非常冗长。幸运的是，您可以使用cssText属性一次添加多个样式

note.style.cssText += 'color:red;background-color:yellow';Code language: JavaScript (javascript)

在本例中，我们使用+=运算符将新样式追加到现有样式中。如果您使用=运算符，则会删除现有样式，如下所示

note.style.cssText = 'color:red;background-color:yellow';Code language: JavaScript (javascript)

2) 使用辅助函数

以下辅助函数接受一个元素和一个样式对象。它将style对象中的所有样式添加到element的style属性中

function css(element, style) {
    for (const property in style)
        element.style[property] = style[property];
}Code language: JavaScript (javascript)

您可以使用此css()辅助函数为<div>元素设置样式，如下所示

const note = document.querySelector('.note');
css(note, {
    'background-color': 'yellow',
    color: 'red'
});Code language: JavaScript (javascript)

全局样式

要为元素添加全局样式，请创建样式元素，用 CSS 规则填充它，并将样式元素追加到 DOM 树，如下所示

const style = document.createElement('style');
style.innerHTML = `
      .note {
        background-color: yellow;
        color:red;
      }
    `;
document.head.appendChild(style);Code language: JavaScript (javascript)