✨ 如何使用JS来改变CSS样式 🎨

在网页开发中，JavaScript 是一款强大的工具，不仅可以实现动态交互，还能轻松修改 CSS 样式！无论是调整颜色、大小，还是隐藏元素，JS 都能帮我们搞定。今天就来聊聊如何用 JS 改变 CSS 样式吧！💻

首先，你需要通过 `document.querySelector` 或 `getElementById` 等方法选择目标元素。例如：

```javascript

const myElement = document.getElementById('myDiv');

```

接着，你可以直接修改该元素的 `style` 属性来设置新的样式。比如：

```javascript

myElement.style.backgroundColor = 'blue'; // 修改背景色为蓝色

myElement.style.fontSize = '20px';// 设置字体大小为 20 像素

```

如果需要更复杂的操作，比如添加或移除类名，可以使用 `classList.add()` 和 `classList.remove()` 方法。例如：

```javascript

myElement.classList.add('active'); // 添加类名

myElement.classList.remove('inactive'); // 移除类名

```

此外，你还可以利用事件监听器让样式变化更有趣！例如点击按钮后触发动画效果：

```javascript

document.querySelector('btn').addEventListener('click', () => {

myElement.style.opacity = '0.5';

});

```

通过这些方法，你的网页将更加生动灵活！快去试试吧！💫