在前端开发中，JavaScript 是一种强大的语言，它不仅可以控制网页的行为，还能获取并修改网页的CSS样式。这是通过使用 DOM（文档对象模型） 操作来实现的。具体而言，主要有几种方法可以做到这一点：使用 element.style 属性、使用 window.getComputedStyle() 方法、使用 classList 属性。这里，我们将重点讨论使用 element.style 属性这一方法。
通过使用 element.style 属性，开发者可以直接获取或设置某个元素的内联样式。这种方法的优点是简单直接，适合于对元素样式的动态修改。当我们需要改变一个元素的样式，或者基于用户的交互来更新页面的显示，element.style 就能派上用场。它允许开发者通过简单的JavaScript代码，迅速地改变元素的外观和感觉。例如，如果我们想要改变一个元素的背景颜色，只需要获取到这个元素的引用，然后通过 element.style.backgroundColor 赋值即可。
让我们深入了解这些方法：
一、使用 ELEMENT.STYLE 属性
element.style 属性提供了一种读取和修改元素的内联样式的直接方式。你可以通过它来设置或获取任何CSS属性。例如，要改变一个元素的颜色和大小，可以这样做：
const element = document.getElementById('myElement');
element.style.color = 'red';
element.style.fontSize = '24px';
这种方法非常适合于对于少数几个样式的修改，特别是当这些修改是临时的，或者是基于用户交互的。
然而，需要注意的是，使用 element.style 只能访问到元素的内联样式（即直接写在元素的 style 属性中的样式）。对于在外部样式表或者<style>标签内定义的CSS样式，这种方法就无能为力了。
二、使用 WINDOW.GETCOMPUTEDSTYLE() 方法
对于需要获取元素当前应用的样式信息，而不仅仅是内联样式时，window.getComputedStyle() 方法就显得尤为重要。这个方法会返回一个对象，包含了元素的所有最终使用的CSS属性值。
const element = document.getElementById('myElement');
const style = window.getComputedStyle(element);
console.log(style.color);
console.log(style.fontSize);
window.getComputedStyle() 方法是读取元素最终样式的最佳方式，特别是当你想要了解某个元素实际显示时应用了哪些样式规则时。
三、使用 CLASSLIST 属性
当涉及到样式的修改，特别是类的添加或移除时，classList 属性提供了一种更方便的方法。它是一个只读属性，返回一个元素的类属性的活动集合，但提供了 add、remove、toggle 等方法来更新这些类。
const element = document.getElementById('myElement');
element.classList.add('new-class');
element.classList.remove('old-class');
element.classList.toggle('active');
使用 classList 是管理元素类最直观、代码最简洁的方式。
总之，前端JavaScript代码获取并修改CSS样式是一种常见的操作，核心在于理解和运用DOM提供的不同接口。无论是直接通过 element.style 修改内联样式，还是使用 window.getComputedStyle() 获取最终样式，亦或是通过 classList 管理元素的类，每种方法都有其适用的场景。作为开发者，合理选择并运用这些方法，可以使我们的页面更加动态和互动。
相关问答FAQs：
1. 如何用 JavaScript 获取 CSS 样式？
JavaScript提供了多种方式来获取CSS样式，你可以使用getComputedStyle方法来获取DOM元素的计算样式。使用该方法可以获取到DOM元素应用的最终计算样式，包括从样式表和内联样式中继承和应用的样式。
// 获取元素
const element = document.getElementById('myElement');
// 获取计算样式
const styles = window.getComputedStyle(element);
// 获取特定样式属性的值
const width = styles.getPropertyValue('width');
const color = styles.getPropertyValue('color');
2. 如何用 JavaScript 修改 CSS 样式？
要修改CSS样式，你可以使用JavaScript来直接修改元素的style属性。这样做可以直接在元素上添加或修改内联样式。
// 获取元素
const element = document.getElementById('myElement');
// 修改样式
element.style.width = '200px';
element.style.color = 'red';
你可以通过这种方式修改元素的各种样式属性，比如宽度、颜色、字体大小等。
3. 如何用 JavaScript 修改外部样式表的 CSS 样式？
如果你需要修改外部样式表中定义的CSS样式，可以通过操作<link>标签来实现。你可以使用document.getElementsByTagName方法获取到所有的<link>标签，然后遍历它们找到对应的样式表。
// 获取所有的 <link> 标签
const links = document.getElementsByTagName('link');
// 遍历所有的 <link> 标签
for (let i = 0; i < links.length; i++) {
const link = links[i];
// 检查样式表的类型
if (link.rel === 'stylesheet') {
// 修改样式表的地址
link.href = 'new-stylesheet.css';
}
}
通过修改link.href属性，你可以将外部样式表的链接地址指向新的样式表文件，从而改变元素所应用的样式。
