DOM
Utiliser des styles CSS

Remarques

Lire et changer les styles en ligne

Style en ligne

Vous pouvez manipuler le style CSS en ligne d'un élément HTML en lisant ou en modifiant simplement sa propriété de style .

Supposez l'élément suivant:

<div id="element_id" style="color:blue;width:200px;">abc</div>

Avec ce JavaScript appliqué:

var element = document.getElementById('element_id');

// read the color
console.log(element.style.color); // blue

//Set the color to red
element.style.color = 'red';

//To remove a property, set it to null
element.style.width = null;
element.style.height = null;

Cependant, si width: 200px; ont été définies dans une feuille de style CSS externe, element.style.width = null n'aurait aucun effet. Dans ce cas, pour réinitialiser le style, vous devez le définir sur initial : element.style.width = 'initial' .

Lecture et changement de style à partir d'une feuille de style

element.style ne lit que les propriétés CSS définies en ligne, en tant qu'attribut d'élément. Cependant, les styles sont souvent définis dans une feuille de style externe. Le style réel d'un élément est accessible avec window.getComputedStyle(element) . Cette fonction renvoie un objet contenant la valeur calculée réelle de tous les styles.

Similaire à l'exemple Lecture et modification de styles en ligne, mais maintenant les styles sont dans une feuille de style:

<div id="element_id">abc</div>
<style type="text/css">
    #element_id {
        color:blue;
        width:200px;
    }
</style>

JavaScript:

var element = document.getElementById('element_id');

// read the color
console.log(element.style.color); // '' -- empty string
console.log(window.getComputedStyle(element).color); // rgb(0, 0, 255)

// read the width, reset it, then read it again
console.log(window.getComputedStyle(element).width); // 200px
element.style.width = 'initial';
console.log(window.getComputedStyle(element).width); // 885px (for example)