通过js修改css样式

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

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

  • 获取元素 :首先,需要获取要修改的元素。通常使用document.getElementByIddocument.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文件或