onclick更改div的背景

Question

我有一个div改变背景的问题，但我还需要它在应用背景颜色时改回来。

代码：JavaScript：

function myFunction() { 
    if (document.getElementById("demo").style.background == "#ff77ee") {
    document.getElementById("demo").style.background = "#000";
} else{
    document.getElementById("demo").style.background = "#ff77ee";
}
}

代码：HTML：

<div id="demo" onclick="javascript:myFunction();"></div>

代码：样式:(在我的索引文件中）

#demo{
    background: #000;
    width: 200px;
    height: 200px;
}

我想要它做的是我想点击将背景颜色改为粉红色。然后，如果我再次点击它，我希望颜色是原始颜色 - 黑色。

Answer 1

试试这段代码。

function myFunction() {
  if (document.getElementById("demo").style.background) {//<-- already having bg
    document.getElementById("demo").style.background = "";//<-- remove it
  } else {
    document.getElementById("demo").style.background = "#ff77ee";
  }
}

<div id="demo" onclick="javascript:myFunction();">hi</div>

修改

var div = document.getElementById('demo');

var myFunction = function() {
  var clas = div.className.split(' ');
  var i;
  if (-1 === (i = clas.indexOf('bg'))) {
    clas.push('bg');
  } else {
    clas.splice(i, 1);
  }
  div.className = clas.join(" ");
};

myFunction(); //just for testing

.bg {
  background: pink !important;
}
.brd {
  border: 1px solid grey;
}
.pad {
  padding: 5px 7px;
}
.bg2 {
  background: orange;
}

<div id="demo" onclick="myFunction();" class='brd pad bg2'>hi there</div>

Answer 2

试试这段代码：

function myFunction() { 
    var e = document.getElementById("demo");
    var c = window.getComputedStyle(e).backgroundColor;
    if (c === "rgb(0, 0, 0)") {
    document.getElementById("demo").style.background = "#ff77ee";
} else{
    document.getElementById("demo").style.background = "#000";
}
}

DEMO

Answer 3

document.getElementById("demo").style.background

此行返回rgb颜色，如：

"rgb(255, 119, 238)"

所以你可以使用：

function myFunction() { 
    if (document.getElementById("header").style.background == "rgb(255, 119, 238)") {
        document.getElementById("header").style.background = "rgb(0, 0, 0)";
    } else{
        document.getElementById("header").style.background = "rgb(255, 119, 238)";
    }
}

Answer 4

这是您的解决方案。我使用布尔变量和更少的代码。

＆＃13;

＆＃13;

var bool = true;
function myFunction() { 
	
    (bool) ? document.getElementById("demo").style.background = "#ff77ee" :  document.getElementById("demo").style.background = "black";
    bool = !bool;

}

＆＃13;

#demo{
    background: #000;
    width: 200px;
    height: 200px;
}

＆＃13;

<div id="demo" onclick="javascript:myFunction();"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

$(document).ready(function(){


$("#demo").click(function(){

   $("#demo").css('background','red');   

});

});



<div id="demo"> test </div>

你可以简单地通过jquery来添加jquery文件最新

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Answer 6

1. Javascript中的backgroundColor
2. CSS中的background-color
3. 您需要获取应用样式的计算样式

<强> 段：

var elem = document.getElementById("demo");
var c = window.getComputedStyle(elem).backgroundColor;
alert(c);

#demo{
    background-color: #f00;
    width: 200px;
    height: 200px;
}

<div id="demo" ></div>