JavaScript 添加内联样式 CSS 变量

在 JavaScript 中，可以动态地添加内联样式（inline style）以及使用 CSS 变量（CSS variables）。

添加内联样式

使用 JavaScript 添加内联样式可以在 HTML 元素中动态添加样式，可以通过 style 属性来实现。

const element = document.getElementById('my-element');
element.style.color = 'red';
element.style.backgroundColor = 'yellow';

上述代码提取了一个 id 为 my-element 的 HTML 元素，并使用 JavaScript 添加了一些内联样式，使文本颜色为红色，背景颜色为黄色。

CSS 变量

CSS 变量可以在样式表中设置并用于所有相关的样式规则，以避免重复的值。

:root {
  --background-color: #F6F6F6;
}

body {
  background-color: var(--background-color);
}

上述代码分别定义了一个全局变量 --background-color 和一个 body 元素的样式规则，并将 --background-color 应用于 body 元素的背景颜色属性。

若想在 JavaScript 中更改 CSS 变量可使用 setProperty 方法。

const root = document.documentElement;
root.style.setProperty('--background-color', 'lightblue');

上述代码的操作变量 --background-color 的值为 lightblue。

总结

在 JavaScript 中，可以动态地添加内联样式和修改 CSS 变量。这些特性可以用于开发交互式 Web 应用程序，并使其更具可读性和可维护性。