单击主 div 时更改整个页面的背景颜色

Question

I try to change the background color of my whole page, on click on my div with id main . Here is my code :

 $(document).ready(function() { var color = 1; $('#main').click(function(){ if (color == 1) { $(this).css("background-color", "green"); color = 2; } else if (color == 2) { $(this).css("background-color", "black"); color = 1; } }); });

 #admin_div { position: absolute; width: 80%; height: 80%; border: 2px solid white; border-radius: 10px; background-color: #D9D9D9; z-index: 1; } h1 { margin-left: 15px; } #main { height: 100%; width: 100%; z-index: 0; }

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <div id="main"> <div id="admin_div"> <h1>Admin Panel</h1> </div> </div>

But the background color is also changing if i click on another element than main. I think it is because everything is inside the main div.

Answer 1

Clicking on red color (target div) everything work like exprected

http://jsfiddle.net/22m0to5o/1/

var color = 1;

$('#main').click(function (event) {

    if (event.target !== this) return;

    if (color == 1) 
    {
        $('body').css("background-color", "green");
        color = 2;
    } 
    if (color == 2) 
    {
        $('body').css("background-color", "black");
        color = 1;
    }

});

Answer 2

This is a kind of useless piece of JavaScript code, although I suppose it could be useful for something. Whether this is just a waste of time or not, I will present you with the code straightaway, that will allow you to dynamically change the background color of the page.

<script language="JavaScript">
<!--
function changeBGC(color){
document.bgColor = color;
}
//-->
</script>

I think it is quite simple.

Answer 3

if you want to change the background color of the whole page, just rewrite the jquery code. change $(this) to $('body').

 <script>
$(document).ready
(
    function()
    {
        var color = 1;

        $('#main').click
        (
            function()
            {
                if (color == 1)
                {
                    $('body').css("background-color", "green");
                    color = 2;
                } 
                else if (color == 2)
                {
                    $('body').css("background-color", "black");
                    color = 1;  
                }

            }
        );

    }
);
</script>