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

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

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

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

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

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

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

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>