8

I'm trying to make a website, but I'm having a problem. When I run it in Chrome I get: "Cannot set property 'backgroundColor' of undefined". I don't understand why I'm getting this. My var is not an array (just an id). I've been googling it for 2 hours but nothing helps me.

Here's my HTML code:

    $(document).ready
    (
	function()
	{
		$("#go").bind("click", remonte)
    }
    );

    function remonte(){	
	$("#menu").animate({marginTop: "-460"}, 500);
	$("#ar").animate({marginTop: "120"}, 500);
	$("#reste").animate({height: "500", marginTop: "-50"},400);
	$("#go").remove();	
	setTimeout(charge, 510); 	
    }

    function charge(){
        $('#reste').load("about.html",'',montreNouveauContenu);
        $("#surmenu").style.backgroundColor="transparent"; //HERE
        $("#menu_jaune").animate({width: "900"}, 500);
    }

    function montreNouveauContenu() {  
	$('#content').show('normal');  
    }  
    function suppr(){
	$("#dev").remove();
	$("#reste").remove();
	$("#content").remove();
	$("#bandeau_graphisme").animate({height: "255"},500);
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Folio</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="style.css"/>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
		<script type="text/javascript" src="anim2.js"></script>		 
	</head>
	<body>
		<div id="tout">
			<img id="menu_jaune" src="https://dummyimage.com/150x200/000/fff" alt="le menu"/></td>
			<div id="bandeau_graphisme">
				<img id="dev" src="https://dummyimage.com/150x200/000/fff" alt="image de couverture du site"/>
			</div>
			<div id="surmenu">
				<div id="menu">
					<img id="ar" src="https://dummyimage.com/150x200/000/fff" alt="ar"/>
				</div>
			</div>
			<div id="go">
				<p id="wtf">HERE WE GO! Click Here</p>
			</div>
			<div id="reste">
			</div>
		</div>
	</body>
</html>

Thank you in advance.

4

2 回答 2

18

It's because a jQuery object doesn't have a style property.

    // ---------v----???
$("#surmenu").style.backgroundColor="transparent"; //HERE

It should be like this:

$("#surmenu").css("backgroundColor", "transparent");

If you wanted to use the DOM API, you could do a traditional DOM selection:

document.getElementById("surmenu").style.backgroundColor="transparent";
于 2012-10-31T20:27:17.103 回答
3

This is a jQuery object, not an element, so it has no style property. You want this:

$("#surmenu")[0].style.backgroundColor="transparent"; //HERE

or this ...

$("#surmenu").get(0).style.backgroundColor="transparent"; //HERE

or this ...

$("#surmenu").css( 'background-color', 'transparent' ); //HERE
于 2012-10-31T20:27:20.857 回答