在 JavaScript 中设置多种样式 - CSS

在编写 Web 应用程序时，经常需要通过 JavaScript 动态更改元素的样式。在这个过程中，CSS 可以帮助我们控制样式。

JavaScript 提供了一些方法来操作元素的样式。

HTMLElement.style 属性

每个 HTML 元素对象都有一个 style 属性，它允许我们直接设置元素的样式。例如：

const element = document.getElementById('my-element');

element.style.backgroundColor = 'red';
element.style.color = 'white';

上面的代码会将 id 为 my-element 的元素的背景色设置为红色，字体颜色设置为白色。

注意，style 属性只能设置直接在元素上定义的样式，无法设置继承的样式。如果需要更改继承的样式，应该使用其他方法。

classList 属性

在 CSS 中，我们可以使用类来组织样式，并将其应用于多个元素。在 JavaScript 中，可以通过 classList 属性来操作元素的类。

classList 属性提供了一些方法，允许我们添加、删除、切换和检查元素的类。例如：

const element = document.getElementById('my-element');

element.classList.add('red');
element.classList.remove('green');
element.classList.toggle('blue');

上面的代码会向 id 为 my-element 的元素添加名为 red 的类，删除名为 green 的类，并切换名为 blue 的类。

setAttribute() 方法

setAttribute() 方法可以设置元素的任何属性，包括样式属性。例如：

const element = document.getElementById('my-element');

element.setAttribute('style', 'background-color: red; color: white;');

上面的代码会将 id 为 my-element 的元素的背景色设置为红色，字体颜色设置为白色，使用 CSS 属性语法。但是，这个方法的缺点是，它会覆盖元素的所有样式，而不仅仅是你想要更改的那个样式。

style.cssText 属性

style.cssText 属性允许我们通过字符串设置元素的样式。例如：

const element = document.getElementById('my-element');

element.style.cssText = 'background-color: red; color: white;';

上面的代码会将 id 为 my-element 的元素的背景色设置为红色，字体颜色设置为白色，使用 CSS 属性语法。与 setAttribute() 方法不同的是，它只会更改你想要更改的样式。但是，同样的缺点是，它也无法设置继承的样式。

最佳实践

在 JavaScript 中设置元素的样式时，应该尽可能使用 classList 属性来添加、删除和切换类。这种方法比直接更改样式属性更加灵活和易于管理。

如果需要更改直接在元素上定义的样式，可以使用 style 属性。

如果必须更改继承的样式，则应该将其定义为新的类，然后使用 classList 属性添加它以应用它。

结论

通过 JavaScript，我们可以使用多种方法来设置元素的样式。在编写 Web 应用程序时，使用正确的方法可以使代码更加灵活和易于管理。