Sommaire

Accéder aux propriétés CSS

1. Les CSS en ligne

Nous avons vu précédemment comment accéder à de nombreuses propriétés des objets via JavaScript. Les propriétés CSS ne dérogent pas à cette règle.

Voici un élément HTML simple :

<h1 id="titre1">Vulputate Sollicitudin Condimentum Bibendum</h1>

Pour accéder aux propriétés CSS de cet objet, nous allons utiliser la propriété style de l’objet HTMLelement.

Attention, cette propriété ne permet d’accéder qu’aux styles CSS en ligne des éléments ciblés, c’est-à-dire aux propriétés CSS déclarées dans l’attribut style="..." de l’élément. Nous n’accédons pas aux styles CSS déclarés dans l’élément <style> ou ceux déclarés dans un fichier .css lié à la page.

Pour accéder aux propriétés CSS de cet élément et pour les afficher dans la console, voici le script très simple utilisé :

<script> 
    var monTitre1 = document.getElementById("titre1") ; 
    console.log(monTitre1.style) ; 
</script>

Voici l’affichage obtenu :

images/C05-001.png

La console affiche la déclaration CSSStyleDeclaration {...} qui contient toutes les propriétés CSS de l’élément ...