All geek questions in one place

Javascript - Unable to set property 'backgroundColor'

I'm trying to make a website, but I have a problem. When I run it in Chrome, I get: "Unable to set backgroundColor property from undefined." I do not understand why I get this. My variable is not an array (just an identifier). I've been google for two hours, but nothing helps me.

Here is 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.

+6
source share
2 answers

This is because the jQuery object does not have a style property.

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

It should be like this:

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

If you want to use the DOM API, you can make the traditional choice of the DOM:

 document.getElementById("surmenu").style.backgroundColor="transparent";
+16
source

This is a jQuery object, not an element, so it does not have a style property. Do you want this:

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

or that...

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

or that...

 $("#surmenu").css( 'background-color', 'transparent' ); //HERE
+3
source

Source: https://habr.com/ru/post/1443314/

More articles:


All Articles