在网页开发中，JavaScript 和 CSS 是两种非常重要的技术，它们通常被用来增强网页的交互性和外观，有时，我们需要通过 JavaScript 来获取和修改元素的 CSS 样式，本文将介绍如何使用 JavaScript 获取和设置 HTML 元素的 CSS 样式。
我们可以通过几种不同的方法来获取元素的 CSS 样式，最常用的方法之一是通过 element.style 属性，这个属性返回一个对象，包含了元素的所有内联样式，如果我们想获取一个名为 "myDiv" 的 <div> 元素的背景颜色，我们可以这样做：
var bgColor = document.getElementById('myDiv').style.backgroundColor;
element.style 只返回内联样式，如果样式是通过外部 CSS 文件或 <style> 标签定义的，我们需要使用 window.getComputedStyle() 方法，这个方法返回一个对象，包含了元素的所有计算后的样式，包括内联样式和外部样式表中的样式。
var computedStyle = window.getComputedStyle(document.getElementById('myDiv'), null);
var bgColor = computedStyle.backgroundColor;
接下来，我们来看如何使用 JavaScript 设置元素的 CSS 样式，同样，我们可以使用 element.style 属性来设置内联样式，改变 "myDiv" 元素的背景颜色：
document.getElementById('myDiv').style.backgroundColor = 'blue';
如果我们想同时设置多个样式，我们可以连续调用 style 属性：
document.getElementById('myDiv').style.color = 'white';
document.getElementById('myDiv').style.fontSize = '14px';
除了直接修改 style 属性之外，我们还可以使用 CSS 类，CSS 类是一种非常强大的机制，它允许我们将多个样式组合成一个单独的类，然后将其应用到多个元素上，我们可以通过 classList 属性来添加、删除或切换 CSS 类，添加一个名为 "highlight" 的类到 "myDiv" 元素：
document.getElementById('myDiv').classList.add('highlight');
我们还可以使用 setAttribute() 方法来设置元素的样式，这个方法允许我们为元素设置任何属性，包括那些通常用于样式的属性，如 class、id、style 等，设置 "myDiv" 元素的内联样式：
document.getElementById('myDiv').setAttribute('style', 'background-color: blue; color: white; font-size: 14px;');
总结一下，JavaScript 提供了多种方法来获取和设置 HTML 元素的 CSS 样式，我们可以使用 element.style 属性来获取和设置内联样式，使用 window.getComputedStyle() 方法来获取计算后的样式，使用 classList 属性来操作 CSS 类，以及使用 setAttribute() 方法来设置元素的属性，了解这些方法可以帮助我们更灵活地控制网页的外观和行为。