Question

我尝试更改整个页面的背景颜色，点击我的ID为main的div。这是my code：

＆＃13;

$(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;	
		}					
	});
});

＆＃13;

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

＆＃13;

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

＆＃13;

但是如果我点击另一个元素然后是主要的，背景颜色也会改变。我认为这是因为一切都在主要的div里面。它甚至可能吗？

Answer 1

点击红色（目标div），一切都像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

这是一种无用的JavaScript代码，虽然我认为它可能对某些东西有用。无论这只是浪费时间，我都会直接向您展示代码，这将允许您动态更改页面的背景颜色。

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

我认为这很简单。

Answer 3

如果要更改整个页面的背景颜色，只需重写jquery代码即可。将$（this）更改为$（＆＃39; body＆＃39;）。

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

在主div上点击更改整页的背景颜色

3 个答案: