Menu
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.
273
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";
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
