如何用 JS 改变 CSS 样式

在网页开发中，JavaScript（JS）和 CSS 是紧密合作的伙伴。通过 JS 改变 CSS 样式，能够为网页增添动态交互效果，提升用户体验。那么，具体该如何操作呢？

获取 HTML 元素是关键的第一步。在 JS 中，可以使用多种方法来获取元素，比如 document.getElementById()，它能通过元素的 id 属性精准定位到特定元素；document.getElementsByTagName() 则能根据标签名获取一组元素；document.getElementsByClassName() 用于通过类名获取元素集合。获取到目标元素后，就可以对其 CSS 样式进行修改了。

直接修改元素的 style 属性是一种常用的方式。例如，获取到一个 id 为“box”的元素后，若想改变它的背景颜色，可以这样写代码：

var box = document.getElementById('box');
box.style.backgroundColor ='red';

这里直接在 style 属性中设置了背景颜色为红色。但要注意，这种方式设置的样式优先级较高，会覆盖 CSS 样式表中的同名样式。

如果想添加或移除 CSS 类来改变样式，也是可行的。通过 classList 属性，我们可以轻松实现这一操作。classList.add() 方法用于添加一个或多个类，classList.remove() 则用于移除类。例如：

var element = document.getElementById('element');
element.classList.add('active');
element.classList.remove('inactive');

这样就可以根据需要切换元素的 CSS 类，而 CSS 类中的样式定义可以在 CSS 样式表中进行集中管理，使代码结构更清晰。

另外，还可以通过操作元素的属性来间接改变 CSS 样式。比如利用 CSS 的属性选择器，在 JS 中动态修改元素的某个属性值，从而触发相应的 CSS 样式变化。

在实际应用中，结合事件监听与改变 CSS 样式能创造出丰富的交互效果。例如，为按钮添加点击事件，当用户点击按钮时改变某个元素的样式，实现页面的动态变化。

掌握用 JS 改变 CSS 样式的方法，能为网页开发带来更多创意和可能性，让网页更加生动、吸引人。无论是简单的样式调整，还是复杂的交互效果实现，都可以通过这些方法轻松达成。