通过js修改css样式

1. 直接修改元素的样式属性

JavaScript允许直接访问HTML元素的style属性来修改其样式。这是修改单个元素样式的最直接方式。

• 获取元素 ：首先，需要获取要修改的元素。通常使用document.getElementById或document.querySelector方法。
• 修改样式 ：然后，可以直接修改该元素的style属性。

示例 ：

假设你有一个HTML元素：

<div id="myDiv">这是一个div元素div>

你可以使用以下JavaScript代码来更改其样式：

// 获取元素
var myDiv = document.getElementById("myDiv");

// 修改样式
myDiv.style.color = "red"; // 改变文字颜色为红色
myDiv.style.backgroundColor = "black"; // 改变背景颜色为黑色
myDiv.style.fontSize = "20px"; // 改变字体大小

2. 添加或删除CSS类

通过添加或删除CSS类来修改元素样式是一种更灵活的方法，尤其是当相同的样式需要应用于多个元素时。

• 定义CSS类 ：首先，在CSS文件或