通过 JavaScript 样式

在 Web 开发中，我们通常使用 CSS 来控制样式。但有时候，我们需要在 JavaScript 中动态地控制样式。这个时候，我们就可以使用 JavaScript 样式。

设置样式

要设置样式，我们需要获取到需要设置样式的元素，然后使用 style 属性来设置。

下面的代码演示了如何通过 JavaScript 设置样式：

// 获取元素
var element = document.getElementById("my-element");

// 设置样式
element.style.color = "red";
element.style.backgroundColor = "yellow";

在这个例子中，我们获取了一个 id 为 my-element 的元素，并设置了它的文字颜色为红色，背景颜色为黄色。

我们也可以使用 setAttribute 方法来设置样式。如下所示：

element.setAttribute("style", "font-size: 16px; font-weight: bold;");

在这个例子中，我们设置元素的字体大小为 16 像素，字体加粗。

无论是使用 style 属性还是 setAttribute 方法，都可以设置多个样式。只需要在多个样式之间用分号分隔开即可。

获取计算样式

有时候，我们需要获取某个元素的计算样式（computed style），而不是它的样式属性（style property）。可以使用 window.getComputedStyle 方法来获取计算样式。

如下所示：

// 获取计算样式
var style = window.getComputedStyle(element);

// 获取某个计算样式属性
var color = style.color;

在这个例子中，我们获取了元素的计算样式，然后获取了计算样式中的颜色。

总结

通过 JavaScript 样式，我们可以动态地设置和获取元素的样式。这对于动态地控制样式非常有用。