onclick изменить фон div

Question

У меня проблема с фоном, меняющим фон, но мне также нужно его изменить, когда был применен цвет фона.

Код: 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() { 
    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 2

$(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 3

Попробуйте этот код.

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>

EDIT

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 4

1. Он находится в Javascript
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>

Answer 5

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 6

Вот ваше решение. Я использую логическую переменную и меньше кода.

var bool = true; 
 
function myFunction() { 
 
\t 
 
    (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>