Interactions entre JavaScript, HTML et CSS

HTML et CSS sont des langages qu’il serait possible de qualifier de statiques. C’est-à-dire que si le style de texte d’un paragraphe utilise la couleur grise, ce paragraphe sera toujours écrit en gris, et il ne sera pas possible de demander au CSS de changer la couleur, mis à part au passage de la souris. Mais aussi non, une règle de style étant statique, elle sera la même à chaque fois qu’elle sera utilisée. Un texte Gris sera toujours un texte gris en CSS. Et c’est là que JavaScript devient très intéressant, puisqu’il va pouvoir modifier le style pour une raison ou une autre : faire disparaître un élément, le faire se déplacer à l’écran...

Supposons que le code HTML contienne une balise tel que :

<div id=’toto’> 
<p>Toto va à la plage</p> 
</div>

Il va être possible, dans un premier temps, de sélectionner soit la balise <div> et donc son contenu, soit la balise <p>, contenue dans la balise <div>. Ensuite, il sera possible d’effectuer des modifications sur le code HTML sélectionné ou sur le style appliqué à ces balises.

var leDiv = document.querySelector("#toto"); 
var leParagraphe = document.querySelector("#toto p");

Dans cet exemple, la variable leDiv est l’équivalent JavaScript de la balise <div id=’toto’> ...