Javascript est Impossible de définir la propriété 'backgroundColor'

Je suis en train de faire un site web, mais je vais avoir un problème. Quand je le lance dans google Chrome, j'obtiens: "Impossible de définir la propriété 'backgroundColor' undefined". Je ne comprends pas pourquoi je reçois ce. Mon var n'est pas un tableau (juste une id). J'ai cherché sur google pendant 2 heures, mais rien ne m'aide.

Voici mon code HTML:

<!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="menu_jaune.png" alt="le menu"/></td>
        <div id="bandeau_graphisme">
            <img id="dev" src="dev3.png" alt="image de couverture du site"/>
        </div>
        <div id="surmenu">
            <div id="menu">
                <img id="ar" src="ar.png" alt="ar"/>
            </div>
        </div>
        <div id="go">
            <p id="wtf">HERE WE GO!</p>
        </div>
        <div id="reste">
        </div>
    </div>
</body>

Mon code Javascript:

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

Vous en remercie d'avance.

OriginalL'auteur jihn smoth | 2012-10-31

15

C'est parce qu'un objet jQuery n'est pas un style propriété.
```
    //---------v----???
$("#surmenu").style.backgroundColor="transparent"; //HERE
```
Il devrait ressembler à ceci:
```
$("#surmenu").css("backgroundColor", "transparent");
```
Si vous souhaitez utiliser l'API DOM, vous pourriez faire un traditionnel DOM sélection:
```
document.getElementById("surmenu").style.backgroundColor="transparent";
```
Ça fonctionne, merci beaucoup!!
Vous êtes les bienvenus.
Ai un mal de tête que je n'étais pas de voir le changement... s'est avéré la mise en cache est activée (programme neuf et j'ai oublié de le désactiver dans DevTools). Juste intéressant de souligner dans le cas où les gens obtiennent le même problème.

OriginalL'auteur I Hate Lazy

C'est un objet jQuery, pas un élément, de sorte qu'il n'a pas de style de la propriété. Vous voulez que ce:

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

ou cela ...

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

ou cela ...

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

OriginalL'auteur Kevin Boucher

Vous devez vous connecter pour publier un commentaire.