在 JavaScript 中修改元素样式的方法包括：修改内联样式属性（使用 element.style 对象）；修改外部样式表规则（使用 document.styleSheets[0] 和 rule.style）；添加或删除 CSS 类（使用 element.classList）；使用工具函数（getComputedStyle()、getWindow()、getComputedStyleMap()）简化样式操作。
如何在 JavaScript 中修改元素样式
在 JavaScript 中，通过操作文档对象模型 (DOM) 来修改元素样式。DOM 允许开发者访问和修改 HTML 页面中的元素。
修改内联样式
最直接的方法是修改元素的内联样式属性。可以使用 element.style 对象访问和设置样式属性。例如：
const element = document.getElementById("my-element");
element.style.color = "blue";这将把元素的文本颜色修改为蓝色。
修改外部样式表
如果元素的样式定义在外部 CSS 样式表中，则可以使用 JavaScript 的 document.styleSheets 属性访问该样式表。例如：
const styleSheet = document.styleSheets[0]; const rule = styleSheet.cssRules[0]; rule.style.color = "green";
这将修改样式表中第一个样式规则的文本颜色为绿色。
添加或删除样式类
也可以使用 JavaScript 添加或删除 CSS 类以修改元素样式。例如：
element.classList.add("my-class");
element.classList.remove("my-class");使用工具函数
为了简化样式操作，JavaScript 提供了几个工具函数：
-
getComputedStyle()返回元素的当前计算样式。 -
getWindow()返回浏览器的窗口对象，允许访问窗口样式属性。 -
getComputedStyleMap()返回元素计算样式的只读映射。
这些函数可以简化样式修改，例如获取元素的实际尺寸或更改窗口滚动条的样式。
示例
下面是一个完整示例，展示如何在 JavaScript 中修改元素样式：
const element = document.getElementById("my-element");
// 修改内联样式
element.style.color = "blue";
// 添加 CSS 类
element.classList.add("my-class");
// 根据计算样式修改样式
const computedStyle = getComputedStyle(element);
element.style.width = `${parseInt(computedStyle.width) + 10}px`;通过利用这些技术，开发者可以动态修改元素样式，从而创建交互式且响应式的网页。
