Fiche DOM HTML : Objet document et modification dynamique des styles

Objet de la fiche :

État de la fiche

Plan de la fiche :

| Avant-propos |
| Objet document.getElementById().style |
| window.getComputedStyle |
| Application au projet de site web |

Avant propos

La propriété style est relative à l'élément sur lequel on est positionné et permet d'accéder à tous les paramètres d'apparence d'un élément. La bonne compréhension de cette fiche est nécessaire à la construction d'un site convivial.

Note : Étant donné que la propriété style d'un élément représente sa déclaration de style en-ligne, qui se trouve dans son attribut style et qui a la priorité la plus haute dans la cascade CSS, elle sera utile pour définir un style pour un élément particulier mais pas suffisante pour connaître le style de l'élément en général, puisqu'elle ne représente que les déclarations CSS définies dans l'attribut style de l'élément, et pas celles qui viennent d'autres règles de style, comme celles qui peuvent se trouver dans la section <head> ou dans des feuilles de style externes.
Pour obtenir les valeurs de toutes les propriétés CSS pour un élément, on utilisera la méthode window.getComputedStyle.

Objet document.getElementById().style

Syntaxes

Il faut tout d'abord définir l'élément sur lequel on veut se positionner.

var x = document.getElementById(identificateur de l'élément);

Pour modifier un propriété :

x.style.propriété="paramètre"

Pour lire une propriété :

var Ma_Propriété = x.style.propriété

Modifier/Lire la feuille de style d'un élément HTML

Les valeurs des paramètres liés à cette propriété sont identiques à ceux que l'on peut définir dans une feuille de style.

.style.cssText ='border:dotted 2px black;color:black;background-color:white"

Modifier/Lire les propriétés de l'arrière plan

Les valeurs des paramètres liés à ces propriétés sont identiques à celles décrites dans la fiche "CSS Arrière plan" :

Gestion des arrières plans
Propriétés	Commentaires
.backgroundColor	Modifier/Lire la couleur d'arrière plan.
.backgroundImage	Image d'arrière plan
.backgroundAttachment	Mode de fixation de l'image sur l'arrière plan
.backgroundRepeat	Répétition de l'image sur l'arrière plan
.backgroundPosition	Position de l'image d'arrière plan
.background	Raccourci servant à regrouper les propriétés individuelles

onclick="document.getElementById('id_Table01').style.backgroundColor="white"

Modifier/Lire les propriétés des bordures

Les valeurs des paramètres liés à ces propriétés sont identiques à celles décrites dans la fiche "CSS Bordures" :

**Propriétés générales des bordures**
Propriétés	Commentaires
.borderColor	Couleur des bordures
.borderWidth	Épaisseur des bordures
.borderStyle	Style des bordures
.border	Raccourci
Les bordures de test
onclick="document.getElementById('id_Div01').style.borderColor="red"

Propriétés individuelles des bordures
Propriétés	Commentaires
.borderBottomColor	Couleur bordure bas
.borderBottomWidth	Épaisseur bordure bas
.borderBottomStyle	Style bordure bas
.borderLeftColor	Couleur bordure gauche
.borderLeftWidth	Épaisseur bordure gauche
.borderLeftStyle	Style bordure gauche
.borderRightColor	Couleur bordure droite
.borderRightWidth	Épaisseur bordure droite
.borderRightStyle	Style bordure droite
.borderTopColor	Couleur bordure haute
.borderTopWidth	Épaisseur bordure haute
.borderTopStyle	Style bordure haute

Bordures de tableau
Propriétés	Commentaires
.emptyCells	Représentation de cellules de tableau vides
.borderCollapse	Définit le rendu des bordures de tableau.
.borderSpacing	.borderSpacing pour un tableau définit la distance entre les bordures des cellules adjacentes uniquement lorsque l'attribut border-collapse est définie à separate.

Modifier/Lire les propriétés des marges

Les valeurs des paramètres liés à ces propriétés sont identiques à celles décrites dans la fiche "CSS Marges" :

Propriétés	Commentaires
.margin	Espace/marge
.marginBottom	Espace/marge en bas
.marginLeft	Espace/marge à gauche
.marginRight	Espace/marge à droite
.marginTop	Espace/marge en haut
.padding	Espace intérieur
.paddingBottom	Espace intérieur en bas
.paddingLeft	Espace intérieur à gauche
.paddingRight	Espace intérieur à droite
.paddingTop	Espace intérieur en haut

Modifier/Lire les propriétés des styles et structuration de texte

Les valeurs des paramètres liés à ces propriétés sont identiques à celles décrites dans la fiche "CSS Styles" :

Propriétés	Commentaires
.captionSide	Légende de tableau
.color	Couleur du texte
.cursor	Pointeur de souris
.direction	Sens d'écriture
.font	police
.fontFamily	Famille de police
.fontSize	Taille de police
.fontStretch	Espacement des caractères de la police
.fontStyle	Style de police
.fontVariant	Variante de police
.fontWeight	Poids de police
.letterSpacing	Espacement des caractères
.listStyle	Représentation de listes
.listStyleImage	Graphiques de puces personnalisés
.listStylePosition	Retrait de listes
.listStyleType	Type de représentation de liste
.lineHeight	Hauteur de ligne
.textAlign	Alignement
.textDecoration	Décoration du texte
.textIndent	Retrait du texte
.textTransform	Transformation du texte
.verticalAlign	Alignement vertical
.wordSpacing	Espacement des mots

Modifier/Lire les propriétés de positionnement

Les valeurs des paramètres liés à ces propriétés sont identiques à celles décrites dans la fiche "CSS Positionnement" :

Propriétés	Commentaires
.clear	Suite pour le cours du texte.
.clip	Limiter le domaine d'affichage.
.float	Flux de texte.
.position	Mode de positionnement.
.left	¹Position à partir de la gauche.
.right	¹Position à partir de la droite.
.top	¹Position à partir du haut.
.buttom	¹Position à partir du bas.
.zIndex	Position de la couche en cas de superposition.

Note¹: Pour des raisons de compatibilité entre navigateur lorsque l'on veut modifier la position d'un élément à l'aide de ces propriétés il faut rajouter la chaîne de caractères 'px'

onclick="document.getElementById('id_Div01').style.top= 20 + 'px';

Modifier/Lire les propriétés de visibilité des éléments HTML

Les valeurs des paramètres liés à ces propriétés sont identiques à celles décrites dans la fiche "CSS Visibilité" :

Propriétés	Commentaires
.display	Modifie le comportement des boîtes de type bloc et en ligne.
.overflow	Affichage d'un contenu.
.visibility	Affichage ou non affichage avec réservation de place.
.textOverflow	Détermine s'il faut afficher le contenu débordant d'un cadre.

Modifier/Lire les propriétés de taille d'un élément

Les valeurs des paramètres liés à ces propriétés sont identiques à celles décrites dans la fiche "CSS TaillesCouleurs" :

Propriétés	Commentaires
.height	Hauteur d'un élément.
.maxHeight	Hauteur maximale.
.maxWidth	Largeur maximale.
.minHeight	Hauteur minimale.
.minWidth	Largeur minimale.
.width	Largeur d'un élément.

Modifier/Lire les propriétés d'impression

Les valeurs des paramètres liés à ces propriétés sont identiques à celles décrites dans la fiche "CSS Impression" :

Propriétés	Commentaires
.pageBreakAfter	Saut de page après.
.pageBreakBefore	Saut de page avant.

Modifier/Lire les propriétés des barres d'ascenseur

Attention tous les navigateurs ne réagissent pas de la même manière, certain comme Firefox ne décode pas du tout ce type de commande.

Propriétés	Commentaires
.scrollbar3dLightColor	Couleur pour effet relief.
.scrollbarArrowColor	Couleur pour les pointeurs de défilement.
.scrollbarBaseColor	Couleur de base des barres de défilement.
.scrollbarDarkshadowColor	Couleur pour les ombres.
.scrollbarFaceColor	Couleur pour la surface.
.scrollbarHighlightColor	Couleur pour le bord haut et le bord gauche.
.scrollbarShadowColor	Couleur pour le bord droit et le bord du bas.
.scrollbarTrackColor	Couleur pour la barre de défilement non cachée par le pointeur de défilement.

window.getComputedStyle

Généralités

getComputedStyle() donne la valeur calculée finale de toutes les propriétés CSS sur un élément.

L'objet retourné par getComputedStyle() est en lecture seulement et peut être utilisé pour lire les styles appliqués à un élément, incluant ceux initiés par l'attribut style (exp style="color:red") mais aussi ceux initiés à partir d'une feuille de style interne ou externe.

Syntaxe

var style = window.getComputedStyle(element[, pseudoElt]); ou l'équivalent
var style = document.defaultView.getComputedStyle(element[, pseudoElt]); avec

element : Element pour lequel vous voulez obtenir une valeur css.
pseudoElt : Facultatif. Chaîne de caractère spécifiant le pseudo-élément à cibler. Doit être null (ou non spécifiée) pour les éléments communs.

Exemple général

Structures
if (window.getComputedStyle) { var _element = document.getElementById('exemple'); var _style = window.getComputedStyle(_element, null); var _color = _style.getPropertyValue('border-top-color'); alert(_color); }

Détails

La ligne 1 permet de tester si le navigateur est compatible avec cette fonctionnalité.
La ligne 2 défini l'objet HTML sur lequel on veut agir (ici un élément dont l'identifiant est "exemple").
La ligne 3 initialise la variable _style avec un tableau de toutes les propriétés de style de l'objet considéré.
La ligne 4 récupère à l'aide de la méthode getPropertyValue() la valeur de la propriété passée en paramètre (ici "border-top-color"), et initialise la variable _color.
La ligne 5 affiche le résultat.

Exemple avec des pseudo-élément

Les pseudo éléments sont des choses comme ::before ou ::after, et sont générés par les styles CSS. :hover, :visited et autres effets similaires sont des pseuodo-classes qui ne créent pas de nouveau élément mais applique seulement des styles spécifiques à un éléments dans des conditions particulières. Tout cela pour préciser que la méthode getComputedStyle ne s'applique que aux pseudo-éléments.

Voir aussi la Fiche CSS : Structuration automatique des pages pour rappel des pseudos elements

Structures
<style type="text/css"> h3:after {content: ' coucou';color:red} </style> <h3>Titre</h3> <script type="text/javascript"> var _h3 = document.querySelector('h3') var _style = getComputedStyle(_h3, ':after'); var _info = _style.content; var _couleur = _style.getPropertyValue('color'); alert("Information : " + _info + " , couleur : " + _couleur); </script>

Détails

Les lignes 1 à 3 définissent le style et les actions à déclencher pour la balise h3.
La ligne 4 affiche le texte Titre avec les styles et actions définies précédemment.
Les lignes 5 à 11 permettent de lire et d'afficher la valeur du pseudo-élement after.
     - La ligne 6 permet de se positionner sur l'élément : les balise hx sont souvent utilisées pour afficher des titres avec des styles pré-définis. Comme ceux sont des balises et directives communes pour l'ensemble du document on évite de leur affecter des identificateurs ou des noms. On ne va donc pas utiliser la fonction document.getElementById() mais la fonction document.querySelector() (Note¹) qui va nous positionner sur le premier élément de type h3 (tous les autres éléments h3 possèdant le même style).
     - La ligne 7 reprend la fonction getComputedStyle() avec comme second paramètre le pseudo élément ici ':after'.
     - La ligne 8 récupère l'info content associée au pseudo-élément.
     - La ligne 9 récupère la valeur de l'attribut color du pseudo-élément.
     - La ligne 10 affiche les résultats (Information : coucou , couleur : rgb(255,0,0))

Note¹ : Pour se positionner ou rechercher un élément on dispose de plusieurs méthodes et en particulier :

document.getElementById() : recherche un élément d'après son identifiant (attribut id),
document.getElementsByTagName() : recherche des éléments d'après leur type (balise),
document.getElementsByClassName() : recherche des éléments d'après leur classe (attribut class)

Mais on dispose aussi de deux fonctions de l'API Selectors.

document.querySelector() : retourne le premier élément trouvé satisfaisant au sélecteur (type de retour : Element), ou null si aucun objet correspondant n'est trouvé.
document.querySelectorAll() : retourne tous les éléments satisfaisant au sélecteur, dans l'ordre dans lequel ils apparaissent dans l'arbre du document (type de retour : NodeList), ou un tableau NodeList vide si rien n'est trouvé.

Exemple de lecture des styles d'un élément

hello

Cet exemple utilise le tableau retourné par getComputedStyle(element, null);.

Ce tableau contient tous les éléments de style en ligne et externes lié à l'élément div identifié comme "exemplediv".

On retrouve les éléments de base initialisés par le navigateur (dont certains spécifiques au navigateur utilisé), mais aussi les styles en ligne appliqués à l'élément div (repérés en caractères blancs sur fond sombre) ainsi que les style externes repérés en caractères blancs sur fond vert.

Application au projet de site web

La consultation de site Internet est parfois pénible pour les personnes malvoyantes. Un bouton permettant d'augmenter la taille des éléments serait bienvenue.

Une image (aup.gif) est positionné en haut à droite de la fenêtre du navigateur. Cette image sera insensible au scrolling.

Lorsque l'on clique sur la flèche (évènement onclick) la taille des textes est augmentée pour prendre une valeur de 22px.

Retrouvez la solution