Éditer les propriétés CSS
Avant de s'attaquer à la manipulation du CSS, rafraîchissons-nous un peu la mémoire :
CSS est l'abréviation de Cascading Style Sheets, c'est un langage qui permet d'éditer l'aspect graphique des éléments HTML et XML. Il est possible d'éditer le CSS d'un seul élément comme nous le ferions en HTML de la manière suivante :
<div style="color:red;">Le CSS de cet élément a été modifié avec l'attribut STYLE. Il n'y a donc que lui qui possède un texte de couleur rouge.</div> |
Mais on peut tout aussi bien éditer les feuilles de style qui se présentent de la manière suivante :
div { color: red; /* Ici on modifie la couleur du texte de tous les éléments <div> */ } |
Il est de bon ton de vous le rappeler : les propriétés CSS de l'attribut style sont prioritaires sur les propriétés d'une feuille de style ! Ainsi, dans le code d'exemple suivant, le texte n'est pas rouge mais bleu :
<style type="text/css"> div { color: red; } </style>
<div style="color:blue;">I'm blue ! DABADIDABADA !</div> |
Voilà tout pour les rappels sur le CSS. Oui, c'était très rapide, mais il suffisait simplement d'insister sur cette histoire de priorité des styles CSS, parce que ça va vous servir !
Comme nous venons de le voir, il y a deux manières de modifier le CSS d'un élément HTML, nous allons ici aborder la méthode la plus simple et la plus utilisée : l'utilisation de la propriété style. L'édition des feuilles de style ne sera pas abordée, car elle est profondément inutile en plus d'être mal gérée par de nombreux navigateurs.
Alors comment accéder à la propriété style de notre élément ? Eh bien de la même manière que pour accéder à n'importe quelle propriété de notre élément :
element.style; // On accède à la propriété « style » de l'élément « element » |
Une fois que l'on a accédé à notre propriété, comment modifier les styles CSS ? Eh bien tout simplement en écrivant leur nom et en leur attribuant une valeur, width (pour la largeur) par exemple :
element.style.width = '150px'; // On modifie la largeur de notre élément à 150px |
Pensez bien à écrire l'unité de votre valeur, il est fréquent de l'oublier et généralement cela pose de nombreux problèmes dans un code !
Maintenant, une petite question pour vous : comment accède-t-on à une propriété CSS qui possède un nom composé ? En Javascript, les tirets sont interdits dans les noms des propriétés, ce qui fait que ce code ne fonctionne pas :
element.style.background-color = 'blue'; // Ce code ne fonctionne pas, les tirets sont interdits |
La solution est simple : supprimer les tirets et chaque mot suivant normalement un tiret voit sa première lettre devenir une majuscule. Ainsi, notre code précédent doit s'écrire de la manière suivante pour fonctionner correctement :
element.style.backgroundColor = 'blue'; // Après avoir supprimé le tiret et ajouté une majuscule au deuxième mot, le code fonctionne ! |
Comme vous pouvez le constater, l'édition du CSS d'un élément n'est pas bien compliquée. Cependant, il y a une limitation de taille : la lecture des propriétés CSS !
Prenons un exemple :
<style type="text/css"> #myDiv { background-color: orange; } </style>
<div id="myDiv">Je possède un fond orange.</div>
<script> var myDiv = document.getElementById('myDiv');
alert('Selon le Javascript, la couleur de fond de ce <div> est : ' + myDiv.style.backgroundColor); // On affiche la couleur de fond </script> |
Et on n'obtient rien ! Pourquoi ? Parce que notre code va lire uniquement les valeurs contenues dans la propriété style. C'est-à-dire, rien du tout dans notre exemple, car nous avons modifié les styles CSS depuis une feuille de style, et non pas depuis l'attribut style.
En revanche, en modifiant le CSS avec l'attribut style, on retrouve sans problème la couleur de notre fond :
<div id="myDiv" style="background-color: orange">Je possède un fond orange.</div>
<script> var myDiv = document.getElementById('myDiv');
alert('Selon le Javascript, la couleur de fond de ce DIV est : ' + myDiv.style.backgroundColor); // On affiche la couleur de fond </script> |
C'est gênant n'est-ce pas ? Malheureusement, on ne peut pas y faire grand-chose à partir de la propriété style, pour cela nous allons devoir utiliser la méthode getComputedStyle() !
Créé avec HelpNDoc Personal Edition: Générateur d'aides CHM gratuit