在前端开发中，JavaScript 通过 DOM 操作来获取并修改 CSS 样式是一项基本而重要的技能。通过这种方式，开发者能够实现页面动态样式的修改、动态布局调整等效果。具体操作主要包括：使用element.style属性直接修改内联样式、通过window.getComputedStyle(element)获取当前元素的所有最终使用的CSS属性值、修改CSS类名来改变元素样式。其中，修改CSS类名是一种高效实用的方法，它通过改变元素的class列表来间接修改元素的样式，不仅代码量少，执行效率高，而且易于管理和维护。
一、使用element.style属性修改内联样式
JavaScript 通过访问DOM元素的style属性来直接修改其内联样式。每个DOM元素的style属性都是一个对象，这个对象的属性与CSS属性一一对应，但是需要注意的是，在JavaScript中，所有的CSS属性名如果包含连字符（-），都需要转换为驼峰命名法。
例如，要修改一个元素的背景颜色和宽度，可以这样操作：
var element = document.getElementById('myElement');
element.style.backgroundColor = 'blue';
element.style.width = '100px';
这种方法直接修改元素的内联样式，效果立竿见影，但它只适用于简单的样式更改。对于复杂的样式调整，这种方法可能会使代码变得冗长且难以维护。
二、通过window.getComputedStyle(element)获取样式
想要获取元素当前应用的所有样式信息，可以使用window.getComputedStyle(element)方法。这个方法返回一个CSS样式声明对象，包含元素的所有最终使用的CSS属性值。通过这个方法，可以很方便地获取到计算后的样式值，而不仅仅是内联样式或某个CSS规则中定义的值。
例如，获取一个元素的最终背景颜色和宽度：
var element = document.getElementById('myElement');
var style = window.getComputedStyle(element);
console.log(style.backgroundColor);
console.log(style.width);
这种方法尤其适合于需要读取元素样式而不是设置它的场景，因为getComputedStyle返回的样式是只读的。
三、修改CSS类名来改变元素样式
对于复杂的样式修改，最优雅的方式可能是通过改变元素的CSS类名。每个DOM元素都有一个classList属性，这是一个类数组对象，提供了添加、删除和切换CSS类名的方法。
var element = document.getElementById('myElement');
// 添加类名
element.classList.add('newClass');
// 删除类名
element.classList.remove('oldClass');
// 如果存在则删除，不存在则添加
element.classList.toggle('anotherClass');
通过预定义CSS类并在JavaScript中动态地添加或删除这些类名，可以非常方便地对元素样式进行大范围的修改，这不仅使代码更加清晰，同时也提高了性能。
四、总结
JavaScript提供了丰富的API来获取和修改元素的CSS样式。直接通过element.style属性修改内联样式适合简单场景、window.getComputedStyle(element)能够获取元素的最终样式值适合需要读取样式的场景、而通过修改CSS类名来间接改变元素样式则适用于复杂的样式更改。在实际开发中，开发者应根据具体需求和场景选择最合适的方法。通过掌握这些技能，可以大大提升页面交互的灵活性和用户体验。
相关问答FAQs：
1. 如何在 JavaScript 中获取 CSS 样式？
在 JavaScript 中，我们可以使用 window.getComputedStyle() 方法来获取元素的 CSS 样式。这个方法返回一个对象，包含了指定元素的所有计算后的 CSS 属性和值。
2. 如何通过 JavaScript 修改 CSS 样式？
要修改元素的 CSS 样式，我们可以使用 element.style 属性。这个属性可以直接访问和修改元素的内联样式。例如，如果我们想修改一个元素的背景颜色，可以使用以下代码：
var element = document.getElementById("myElement"); // 获取元素
element.style.backgroundColor = "red"; // 修改背景颜色为红色
除了使用 element.style 属性，我们还可以使用 element.classList 属性来添加、删除或切换元素的 CSS 类名，从而改变元素的样式。
3. 如何使用 JavaScript 动态地修改 CSS 样式？
如果我们想通过 JavaScript 动态地修改 CSS 样式，可以借助 element.setAttribute() 方法来修改元素的属性。例如，我们想实现点击按钮后，将一个元素的宽度增加 100 像素，可以使用以下代码：
var button = document.getElementById("myButton"); // 获取按钮元素
var element = document.getElementById("myElement"); // 获取元素
// 绑定点击事件
button.addEventListener("click", function() {
var currentWidth = parseInt(element.getAttribute("style")); // 获取当前宽度
var newWidth = currentWidth + 100; // 计算新的宽度
element.setAttribute("style", "width: " + newWidth + "px"); // 修改元素的宽度
});
通过上述方法，我们可以根据需要动态地修改元素的 CSS 样式。
