DHTML avec Javascript et CSS ne fonctionne pas

Donc, pour une raison quelconque, ce code javascript discret ne fonctionne pas et je ne peux pas comprendre pour la vie de moi pourquoi cela ne fonctionnera pas.DHTML avec Javascript et CSS ne fonctionne pas

Je modifie dynamiquement le className d'un élément div et je m'attends donc à ce que le CSS reflète cette modification. Cependant ce n'est pas le cas. Voici le code simplifié.

html:

<head> 
    <title>Your Page</title> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    <script type="text/javascript" src="us.js"></script> 
</head> 

<body> 
    <div id="wrapper">  
    <h1 id="title">Your Page</h1> 
    </div> 
</body>

javascript:

window.onload = function() { 
    document.getElementById("wrapper").className = "2"; 
}

css:

#wrapper{ 
    background-color: white; 
} 

#wrapper.1 { 
    background-color: black; 
} 

#wrapper.2 { 
    background-color: red; 
} 

#wrapper.3 { 
    background-color: blue; 
}

Je regarde l'emballage div dans Firebug et il montre la classe étant changé en "2" . Cependant, la page Web ne reflète pas cela en changeant la couleur d'arrière-plan pour être rouge. (ça ne marche pas non plus avec le changement de couleur du texte, j'ai essayé ça.). Je sais que le CSS est correctement chargé. Alors quel est le problème?

Source

2010-04-12 Dennis Hodapp

Le nom de la classe ne doit pas être un nombre. –

A fait l'affaire! Merci tout le monde. Je ne peux pas croire que ce n'est pas abordé dans la plupart des tutoriels CSS que j'ai vu. –

2 est un nom de classe non valide. Votre nom de classe ne peut pas être un nombre; il doit s'agir d'une chaîne alphanumérique commençant par une lettre.

Source

2010-04-12 02:46:38 meagar

Avez-vous essayé d'utiliser un autre nom de classe? Vérifiez Which characters are valid in CSS class names/selectors?. Les noms de classe CSS ne peuvent pas commencer avec des nombres.

Source

2010-04-12 02:46:05 z33m

Vos noms de classe CSS doivent commencer par une lettre, comme ceci:

#wrapper.num1 { 
    background-color: black; 
} 

#wrapper.num2 { 
    background-color: red; 
} 

#wrapper.num3 { 
    background-color: blue; 
}

Source

2010-04-12 02:46:10

DHTML avec Javascript et CSS ne fonctionne pas

Répondre

Questions connexes