点击更改div的背景
点击更改div的背景
提问于 2014-11-21 08:21:44
我有一个问题，一个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;
}我想要做的是，我想点击改变背景颜色为粉红色。然后，如果我再次点击它，我希望颜色是原来的颜色-黑色.。
回答 6
Stack Overflow用户
回答已采纳
发布于 2014-11-21 08:33:21
试试下面的代码：
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
Stack Overflow用户
发布于 2014-11-21 08:29:56
试试这段代码。
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>
Stack Overflow用户
发布于 2014-11-21 08:37:51
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)";
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27056920
复制相关文章
相似问题
腾讯云开发者
