JS 控制CSS样式表

JS 控制 CSS 样式表的方式主要有两种：通过修改样式属性来修改元素样式，以及通过切换 CSS 类名来切换元素样式。下面分别给出具体的步骤和示例说明。

通过修改样式属性修改元素样式

1. 获取需要修改样式的元素
   可以通过 document.getElementById 、 document.getElementsByClassName 、 document.getElementsByTagName 等 API 来获取。

var ele = document.getElementById("myDiv");

1. 修改元素的样式属性
   通过修改元素的 style 属性来修改样式，例如修改背景颜色为红色：

ele.style.backgroundColor = "red";

示例1：将背景颜色切换为红色和白色

<div id="myDiv"></div>
<button onclick="changeColor()">切换颜色</button>

<script>
function changeColor() {
  var ele = document.getElementById("myDiv");
  if (ele.style.backgroundColor === "red") {
    ele.style.backgroundColor = "white";
  } else {
    ele.style.backgroundColor = "red";
  }
}
</script>

示例2：通过输入框修改字体大小

<div id="myDiv">Hello world</div>
<input type="number" id="fontSize" placeholder="请输入字体大小">
<button onclick="changeFontSize()">修改字体大小</button>

<script>
function changeFontSize() {
  var ele = document.getElementById("myDiv");
  var fontSizeInput = document.getElementById("fontSize");
  var fontSize = fontSizeInput.value + "px";
  ele.style.fontSize = fontSize;
}
</script>

通过切换 CSS 类名切换元素样式

1. 获取需要修改样式的元素
   同样可以通过 document.getElementById 、 document.getElementsByClassName 、 document.getElementsByTagName 等 API 来获取。

2. 定义 CSS 类名及样式
   定义一个 CSS 类名，并在样式表中为该类名定义一组样式，例如：

.my-class {
  background-color: red;
}

1. 切换元素的 CSS 类名
   通过修改元素的 className 属性来切换类名，例如：

ele.className = "my-class";

示例1：点击按钮切换元素背景颜色

<style>
.red-bg {
  background-color: red;
}
.white-bg {
  background-color: white;
}
</style>

<div id="myDiv"></div>
<button onclick="toggleBgColor()">切换背景颜色</button>

<script>
function toggleBgColor() {
  var ele = document.getElementById("myDiv");
  if (ele.className === "red-bg") {
    ele.className = "white-bg";
  } else {
    ele.className = "red-bg";
  }
}
</script>

示例2：点击按钮切换元素的样式

<style>
.my-style {
  font-size: 24px;
  color: red;
}
</style>

<div id="myDiv"></div>
<button onclick="toggleStyle()">切换样式</button>

<script>
function toggleStyle() {
  var ele = document.getElementById("myDiv");
  if (ele.className === "my-style") {
    ele.className = "";
  } else {
    ele.className = "my-style";
  }
}
</script>