Question

我想实现一些使用if语句改变一些css样式的javascript。不知道该怎么做，任何帮助都会很棒！

Answer 1

首先，要使用JavaScript更改CSS，语法如下所示：

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

例如，如果要将id =“container”的元素的 display 属性更改为block，则为：

document.getElementById("container").style.display = "block";

鉴于此，您可以根据需要的条件轻松添加IF语句。例如：

if(condition)
{
     document.getElementById("container").style.display = "block";
}

Answer 2

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

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

例如：

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

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

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

删除

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

演示：

＆＃13;

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");
}

＆＃13;

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

＆＃13;

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

＆＃13;

如何用js有条件地改变css样式？

2 个答案: