如何使用JS有条件地更改CSS样式? [英] How can I conditionally change css styles with js?

问题描述

我想实现一些使用if语句更改某些CSS样式的JavaScript.不知道该怎么做，任何帮助都会很棒！

I'd like to implement some javascript that uses an if statement to change some css styles. Not sure how to do it, any help would be great!

推荐答案

如果要使用JavaScript更改元素的单个样式，请使用

If you want to change a single style of an element using JavaScript, use

document.getElementById(id).style.property = new style

例如:

document.getElementById("myDiv").style.color= "red";

要向元素添加新的CSS类，请使用

To add a new CSS class to an element, use

document.getElementById(id).classList.add("mystyle");

要删除

document.getElementById(id).classList.remove("mystyle");

演示:

function changeSingleStyle() {
  var color = document.getElementById("myDiv").style.color;
  if (color === "red")
    document.getElementById("myDiv").style.color = "yellow";
  else
    document.getElementById("myDiv").style.color = "red";
}
function addClass() {
    document.getElementById("myDiv").classList.add("mystyle");
}
function removeClass() {
    document.getElementById("myDiv").classList.remove("mystyle");
}

.mystyle {
  color : red;
  background: green;
  font-size: 50px;
}

<div id="myDiv"> This is a div </div>
<button onclick="changeSingleStyle()">changeSingleStyle</button>
<button onclick="addClass()">addClass</button>
<button onclick="removeClass()">removeClass</button>

这篇关于如何使用JS有条件地更改CSS样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！