Les Fiches de MonWebFacile





Chapitre

Fiche

 

Fiche DOM HTML : Objet document et modification dynamique des styles

Objet de la fiche :

État de la fiche Fiche OK


Plan de la fiche :

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 1Position à partir de la gauche.
.right 1Position à partir de la droite.
.top 1Position à partir du haut.
.buttom 1Position à partir du bas.
.zIndex Position de la couche en cas de superposition.

Note1: 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
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
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() (Note1) 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))

Note1 : 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


Respectons la propriété intellectuelle