JavaScript 修改 CSS 样式是前端开发中常见的操作，可以实现动态的样式变化和交互效果。JavaScript 修改CSS样式的关键步骤包括：获取元素、使用style对象修改样式、使用classList操作类、通过CSSOM修改规则。其中，通过classList操作类 是修改样式时非常方便且易于维护的方法。
一、获取元素
在JavaScript对CSS样式进行修改之前，首先需要获取页面中的元素。可以通过多种方法获取元素，例如 getElementById、getElementsByClassName、getElementsByTagName 和 querySelector 等。
通过 ID 获取元素
var element = document.getElementById('elementId');
通过类名获取元素集合
var elements = document.getElementsByClassName('className');
二、使用style对象修改样式
在获取到元素后，可以通过访问元素的 style 属性来直接修改其行内样式（inline styles）。style 对象包含了元素所有可写的样式属性。
修改元素的颜色和大小
element.style.color = 'blue';
element.style.fontSize = '16px';
批量修改样式
如果要修改多个样式，可以编写一个函数来处理：
function changeStyle(el, color, size) {
el.style.color = color;
el.style.fontSize = size;
}
changeStyle(element, 'red', '20px');
三、使用classList操作类
使用 classList 是操作元素类的一种更高级且易于控制的方式。classList 提供了 add、remove、toggle 和 contAIns 等方法来处理元素的类。
添加和移除类
element.classList.add('newClass');
element.classList.remove('oldClass');
切换类
如果元素中已存在给定的类，则移除它，否则添加它。
element.classList.toggle('activeClass');
检查元素是否包含某个类
if (element.classList.contains('someClass')) {
// 执行操作
}
四、通过CSSOM修改规则
CSS Object Model (CSSOM) 允许JavaScript与CSS样式表进行交互，可以进行更复杂的操作，如增加或删除规则。
访问文档中的样式表
var styleSheet = document.styleSheets[0];
增加新的规则
styleSheet.insertRule('body { background-color: #f3f3f3; }', 0);
移除规则
styleSheet.deleteRule(0);
通过以上的方法，可以灵活地控制CSS样式，实现各种交互效果。值得注意的是，修改元素的样式时尽量避免过度使用内联样式，因为这可能会导致样式难以维护和复写问题。合理使用类和样式表规则通常是更好的选择。
相关问答FAQs：
问：如何使用 JavaScript 修改 CSS 样式？
回答：要使用 JavaScript 修改 CSS 样式，可以通过以下几种方式实现，例如使用 document.getElementById 方法获取元素，然后通过 style 属性修改元素的样式，或者使用 classList 属性添加、移除类名来改变样式。还可以使用 document.querySelector 方法选取元素，然后修改其内联样式或使用 style.setProperty 方法来改变样式。此外，也可以动态创建 <style> 标签来添加样式规则，或者使用 link 标签的 href 属性替换样式表链接来切换样式。总之，JavaScript 提供了多种方法来对 CSS 样式进行修改。
问：有哪些 JavaScript 方法可以修改 CSS 样式？
回答：JavaScript 提供了多种方法来修改 CSS 样式。其中常用的方法有使用 getElementById、querySelector 选取元素，然后使用 style 属性修改样式，如 element.style.property，其中 element 是选取的元素，property 是要修改的样式属性。还可以使用 classList 属性操作类名，如 element.classList.add('classname') 添加类名，element.classList.remove('classname') 移除类名，从而改变样式。另外还有 style.setProperty 方法来设置样式属性，或者动态创建 <style> 标签，通过添加样式规则来修改样式。
问：JavaScript 怎样实现动态改变元素的 CSS 样式？
回答：要实现动态改变元素的 CSS 样式，可以使用 JavaScript。一种常见的方式是通过 document.getElementById 方法或 querySelector 方法选取元素，并使用 style 属性修改元素的样式，如 element.style.property = value，其中 element 是选取的元素，property 是要修改的样式属性，value 是要设置的样式值。另外，也可以使用 classList 属性来添加、移除类名，从而改变样式。还可以通过动态创建 <style> 标签，然后使用 appendChild 方法将样式规则添加到 <style> 标签中，再将 <style> 标签添加到 <head> 标签中，从而实现动态改变元素的 CSS 样式的效果。
