在 JavaScript 中改变 CSS 有三种方法：使用 document.styleSheets 属性修改样式表规则。直接通过元素的 style 属性设置或修改 CSS 样式。使用 CSSOM API 访问和修改 CSS 样式规则。
如何在 JavaScript 中改变 CSS
前言
JavaScript 是一种强大的编程语言，可用于动态修改网页内容和样式。本文将介绍如何在 JavaScript 中改变 CSS。
使用 document.styleSheets
立即学习“前端免费学习笔记（深入）”；
document.styleSheets 属性返回当前文档的所有样式表。我们可以通过以下方式来改变样式：
// 获取第一个样式表
const sheet = document.styleSheets[0];
// 添加一条新规则
sheet.addRule('body', 'background-color: red;');
// 修改现有规则
sheet.rules[0].style.color = 'blue';使用 style 属性
每个 HTML 元素都有一个 style 属性，它是一个 CSS 属性的集合。我们可以通过以下方式来改变样式：
// 获取 body 元素
const body = document.querySelector('body');
// 设置背景色
body.style.backgroundColor = 'red';
// 设置字体颜色
body.style.color = 'blue';使用 CSSOM API
CSSOM API 提供了一组方法来访问和修改 CSS 样式规则。使用以下方法可以改变样式：
document.getElementById('myElement').classList.add('active');
document.getElementById('myElement').style.setProperty('color', 'red');注意：
- 这些方法只适用于 inline 样式或与 HTML 元素关联的样式表。
- 对于外部样式表，则需要使用异步请求或其他技术来动态加载和修改它们。
