Javascript I'；我在JS中使用一个函数，将颜色更改为红色，然后再更改为绿色_Javascript_Html_Css_Web

Javascript I'；我在JS中使用一个函数，将颜色更改为红色，然后再更改为绿色

javascript html css web

Javascript I'；我在JS中使用一个函数，将颜色更改为红色，然后再更改为绿色,javascript,html,css,web,Javascript,Html,Css,Web,我在JS中使用了一个函数，将颜色更改为红色，然后再更改为绿色onclick。当我单击div时，它将变为红色，但当我再次单击它时，它将保持红色，而它本应变回绿色。我检查了我的代码多次，但我不知道如何解决我的问题 <html> <head> <title>Test</title> </head> <body> <div id="c" onclick="func()">

我在JS中使用了一个函数，将颜色更改为红色，然后再更改为绿色onclick。当我单击div时，它将变为红色，但当我再次单击它时，它将保持红色，而它本应变回绿色。我检查了我的代码多次，但我不知道如何解决我的问题

<html>

<head>

<title>Test</title>

</head>

<body>

<div id="c" onclick="func()"></div>

<style>
#c{
background:#00ff00;
width:100px;
height:100px;
}
</style>

<script>
var c = document.getElementById('c');
function func(){
if(c.style.background = "#00ff00"){
c.style.background = "#ff0000";
}
else if(c.style.background = "#ff0000"){
c.style.background = "#00ff00";
}
}
</script>

</body>


试验
#c{
背景：#00ff00；
宽度：100px；
高度：100px；
}
var c=document.getElementById（'c'）；
函数func（）{
if（c.style.background=“#00ff00”）{
c、 style.background=“#ff0000”；
}
else if（c.style.background=“#ff0000”）{
c、 style.background=“#00ff00”；
}
}

谢谢你的帮助

试试这个`

<html>

<head>

<title>Test</title>

</head>

<body>

<div id="c" onclick="func()"></div>

<style>
#c{
background:#00ff00;
width:100px;
height:100px;
}
</style>

<script>
var x = 0;
var c = document.getElementById('c');
function func(){
if(!x){
c.style.background = "#ff0000";
x = 1;
}
else{
c.style.background = "#00ff00";
x = 0;
}
}
</script>

</body>
</html>


试验
#c{
背景：#00ff00；
宽度：100px；
高度：100px；
}
var x=0；
var c=document.getElementById（'c'）；
函数func（）{
如果（！x）{
c、 style.background=“#ff0000”；
x=1；
}
否则{
c、 style.background=“#00ff00”；
x=0；
}
}

无法在此处使用

.style.background

检索背景样式（您只能对内联样式执行此操作）。如果要检索样式，请使用。您可以使用css类和

.classList.toggle

，使您的生活更轻松

此外，通常使用内联事件处理程序。在代码中分配处理程序

document.addEventListener（“单击”，切换颜色）；
功能切换颜色（evt）{
如果（evt.target.id==“c”）{
evt.target.classList.toggle（“红色”）；
}
}

#c{
背景色：#00ff00；
宽度：100px；
高度：100px；
}
#c、 红色的{
背景色：红色；
}

在脚本标记中的if语句中，当您比较两件事时，请使用

或

。您不能使用

，因为它是赋值运算符，不会返回true或false

这就是函数的编写方式

<script>
var c = document.getElementById('c');
function func(){
if(c.style.background === "#00ff00"){
c.style.background = "#ff0000";
}
else if(c.style.background === "#ff0000"){
c.style.background = "#00ff00";
}
}
</script>


var c=document.getElementById（'c'）；
函数func（）{
如果（c.style.background==“#00ff00”）{
c、 style.background=“#ff0000”；
}
else if（c.style.background==“#ff0000”）{
c、 style.background=“#00ff00”；
}
}

在同一元素的两种不同样式之间切换的最简单方法是使用类。它看起来很整洁，还可以帮助您在一个地方更改多个属性，而不是编写多行代码来执行类似的操作。那么，试试这个：

<html>

<head>

<title>Test</title>

</head>

<body>

<div id="c" class="green" onclick="func()"></div>

<style>
#c{
width:100px;
height:100px;
}
.green {
  background: green;
}
.red {
  background: red;
}
</style>

<script>
var c = document.getElementById('c');
var func = function(){
if(c.classList.contains('green')){
  c.classList.remove('green');
  c.classList.add('red');
} else if(c.classList.contains('red')) {
  c.classList.remove('red');
  c.classList.add('green');
}
};
</script>

</body>


试验
#c{
宽度：100px；
高度：100px；
}
格林先生{
背景：绿色；
}
瑞德先生{
背景：红色；
}
var c=document.getElementById（'c'）；
var func=函数（）{
if（c.classList.contains（'green'））{
c、 classList.remove（'green'）；
c、 添加（'red'）；
}else if（c.classList.contains（'red'））{
c、 classList.remove（'red'）；
c、 添加（'green'）；
}
};

这里有同样的JSFIDLE链接：

谢谢！它起作用了，但是你能解释为什么x变量会产生如此大的差异吗？我对javascript比较陌生。只使用一个额外的变量是最简单的方法。