DOM HTML StyleObjet
Objet Style
L'objet Style représente une déclaration de style individuelle.
Accéder à l'objet Style
L'objet Style est accessible depuis la zone head d'un document, ou depuis un élément HTML spécifié.
Accéder à l'objet style depuis la zone head d'un document :
var x = document.getElementsByTagName("STYLE");
Essayez-le vous-même
Accéder à l'objet style d'un élément spécifié :
var x = document.getElementById("myH1").style;
Essayez-le vous-même
Créer un objet Style
Vous pouvez utiliser la méthode document.createElement() pour créer un élément <style> :
var x = document.createElement("STYLE");
Essayez-le vous-même
Vous pouvez également définir la propriété style d'un élément existant :
document.getElementById("myH1").style.color = "red";
Essayez-le vous-même
Propriétés de l'objet Style
La colonne « CSS » indique dans quelle version de CSS la propriété est définie (CSS1, CSS2 ou CSS3).
| Propriété | Description | CSS |
|---|---|---|
| alignContent | Définit ou renvoie l'alignement (horizontal) entre les éléments lorsque les éléments d'un conteneur flexible n'occupent pas tout l'espace disponible. | 3 |
| alignItems | Définit ou renvoie l'alignement des éléments dans un conteneur flexible. | 3 |
| alignSelf | Définit ou renvoie l'alignement de l'élément sélectionné dans un conteneur flexible. | 3 |
| animation | Est une propriété raccourcie pour les propriétés ci-dessous, sauf la propriété animationPlayState. | 3 |
| animationDelay | Définit ou renvoie le moment où l'animation commencera. | 3 |
| animationDirection | Définit ou renvoie si l'animation est jouée en sens inverse en alternance dans les boucles. | 3 |
| animationDuration | Définit ou renvoie le nombre de secondes ou de millisecondes nécessaires à l'animation pour se terminer. | 3 |
| animationFillMode | Définit ou renvoie le style à appliquer à l'élément lorsque l'animation ne se joue pas (lorsque l'animation est terminée, ou lorsqu'elle a un délai qui n'a pas encore commencé). | 3 |
| animationIterationCount | Définit ou renvoie le nombre de fois que l'animation sera jouée. | 3 |
| animationName | Définit ou renvoie le nom de l'animation @keyframes. | 3 |
| animationTimingFunction | Définit ou renvoie la courbe de vitesse de l'animation. | 3 |
| animationPlayState | Définit ou renvoie si l'animation est en cours d'exécution ou en pause. | 3 |
| background | Définit ou renvoie toutes les propriétés d'arrière-plan dans une seule déclaration. | 1 |
| backgroundAttachment | Définit ou renvoie si l'image d'arrière-plan est fixe ou défile avec la page. | 1 |
| backgroundColor | Définit ou renvoie la couleur d'arrière-plan d'un élément. | 1 |
| backgroundImage | Définit ou renvoie l'image d'arrière-plan d'un élément. | 1 |
| backgroundPosition | Définit ou renvoie la position de départ de l'image d'arrière-plan. | 1 |
| backgroundRepeat | Définit ou renvoie comment l'image d'arrière-plan sera répétée. | 1 |
| backgroundClip | Définit ou renvoie la zone de peinture de l'arrière-plan. | 3 |
| backgroundOrigin | Définit ou renvoie la zone de positionnement de l'image d'arrière-plan. | 3 |
| backgroundSize | Définit ou renvoie la taille de l'image d'arrière-plan. | 3 |
| backfaceVisibility | Définit ou renvoie si un élément est visible lorsqu'il est orienté à l'opposé de l'écran. | 3 |
| border | Définit ou renvoie borderWidth, borderStyle et borderColor dans une seule déclaration. | 1 |
| borderBottom | Définit ou renvoie toutes les propriétés borderBottom* dans une seule déclaration. | 1 |
| borderBottomColor | Définit ou renvoie la couleur de la bordure inférieure. | 1 |
| borderBottomLeftRadius | Définit ou renvoie la forme de la bordure du coin inférieur gauche. | 3 |
| borderBottomRightRadius | Définit ou renvoie la forme de la bordure du coin inférieur droit. | 3 |
| borderBottomStyle | Définit ou renvoie le style de la bordure inférieure. | 1 |
| borderBottomWidth | Définit ou renvoie la largeur de la bordure inférieure. | 1 |
| borderCollapse | Définit ou renvoie si la bordure du tableau est fusionnée en une seule bordure. | 2 |
| borderColor | Définit ou renvoie la couleur de la bordure d'un élément (peut avoir jusqu'à quatre valeurs). | 1 |
| borderImage | Propriété raccourcie pour définir ou renvoyer toutes les propriétés borderImage*. | 3 |
| borderImageOutset | Définit ou renvoie de combien la zone de l'image de bordure dépasse la boîte de bordure. | 3 |
| borderImageRepeat | Définit ou renvoie si l'image de bordure est répétée en mosaïque ou étirée. | 3 |
| borderImageSlice | Définit ou renvoie les décalages vers l'intérieur de la bordure de l'image. | 3 |
| borderImageSource | Définit ou renvoie l'image à utiliser comme bordure. | 3 |
| borderImageWidth | Définit ou renvoie la largeur de la bordure de l'image. | 3 |
| borderLeft | Définit ou renvoie toutes les propriétés borderLeft* dans une seule déclaration. | 1 |
| borderLeftColor | Définit ou renvoie la couleur de la bordure gauche. | 1 |
| borderLeftStyle | Définit ou renvoie le style de la bordure gauche. | 1 |
| borderLeftWidth | Définit ou renvoie la largeur de la bordure gauche. | 1 |
| borderRadius | Propriété raccourcie pour définir ou renvoyer les quatre propriétés border*Radius. | 3 |
| borderRight | Définit ou renvoie toutes les propriétés borderRight* dans une seule déclaration. | 1 |
| borderRightColor | Définit ou renvoie la couleur de la bordure droite. | 1 |
| borderRightStyle | Définit ou renvoie le style de la bordure droite. | 1 |
| borderRightWidth | Définit ou renvoie la largeur de la bordure droite. | 1 |
| borderSpacing | Définit ou renvoie la distance entre les cellules d'un tableau. | 2 |
| borderStyle | Définit ou renvoie le style de la bordure d'un élément (peut avoir jusqu'à quatre valeurs). | 1 |
| borderTop | Définit ou renvoie toutes les propriétés borderTop* en une seule déclaration. | 1 |
| borderTopColor | Définit ou renvoie la couleur de la bordure supérieure. | 1 |
| borderTopLeftRadius | Définit ou renvoie la forme de la bordure du coin supérieur gauche. | 3 |
| borderTopRightRadius | Définit ou renvoie la forme de la bordure du coin supérieur droit. | 3 |
| borderTopStyle | Définit ou renvoie le style de la bordure supérieure. | 1 |
| borderTopWidth | Définit ou renvoie la largeur de la bordure supérieure. | 1 |
| borderWidth | Définit ou renvoie la largeur de la bordure d'un élément (peut avoir jusqu'à quatre valeurs). | 1 |
| bottom | Définit ou renvoie la position inférieure d’un élément positionné. | 2 |
| boxDecorationBreak | Définit ou renvoie le comportement de l’arrière-plan et de la bordure d’un élément lors d’un saut de page, ou d’un élément en ligne lors d’un saut de ligne. | 3 |
| boxShadow | Définit ou renvoie l’ombre portée d’un élément. | 3 |
| boxSizing | Permet de définir certains éléments pour qu’ils correspondent à une zone particulière d’une manière spécifique. | 3 |
| captionSide | Définit ou renvoie la position de la légende du tableau. | 2 |
| clear | Définit ou renvoie la position d’un élément par rapport aux objets flottants. | 1 |
| clip | Définit ou renvoie la partie visible d’un élément positionné. | 2 |
| color | Définit ou renvoie la couleur du texte. | 1 |
| columnCount | Définit ou renvoie le nombre de colonnes dans lesquelles un élément doit être divisé. | 3 |
| columnFill | Définit ou renvoie comment remplir les colonnes. | 3 |
| columnGap | Définit ou renvoie l'espace entre les colonnes. | 3 |
| columnRule | Propriété raccourcie pour définir ou renvoyer toutes les propriétés columnRule*. | 3 |
| columnRuleColor | Définit ou renvoie la couleur du filet entre les colonnes. | 3 |
| columnRuleStyle | Définit ou renvoie le style du filet entre les colonnes. | 3 |
| columnRuleWidth | Définit ou renvoie la largeur de la règle entre les colonnes. | 3 |
| columns | Une propriété raccourcie pour définir ou renvoyer columnWidth et columnCount. | 3 |
| columnSpan | Définit ou renvoie le nombre de colonnes qu'un élément doit couvrir. | 3 |
| columnWidth | Définit ou renvoie la largeur des colonnes. | 3 |
| content | Utilisé avec les pseudo-éléments :before et :after pour insérer du contenu généré. | 2 |
| counterIncrement | Incrémente un ou plusieurs compteurs. | 2 |
| counterReset | Crée ou réinitialise un ou plusieurs compteurs. | 2 |
| cursor | Définit ou renvoie le type de curseur à afficher pour le pointeur de la souris. | 2 |
| direction | Définit ou renvoie la direction du texte. | 2 |
| display | Définit ou renvoie le type d'affichage d'un élément. | 1 |
| emptyCells | Définit ou renvoie si les bordures et l'arrière-plan sont affichés pour les cellules vides dans un tableau. | 2 |
| filter | Définit ou renvoie le filtre d'image (effets visuels, tels que le flou gaussien et la saturation). | 3 |
| flex | Définit ou renvoie la longueur de l'élément, par rapport aux autres éléments flexibles du même conteneur. | 3 |
| flexBasis | Définit ou renvoie la longueur initiale d'un élément flexible. | 3 |
| flexDirection | Définit ou renvoie la direction des éléments flexibles. | 3 |
| flexFlow | Est une propriété raccourcie pour les propriétés flexDirection et flexWrap. | 3 |
| flexGrow | Définit ou renvoie la quantité dont l'élément va croître par rapport aux autres éléments flexibles du même conteneur. | 3 |
| flexShrink | Définit ou renvoie la quantité dont l'élément va se réduire par rapport aux autres éléments flexibles dans le même conteneur. | 3 |
| flexWrap | Définit ou renvoie si les éléments flexibles passent sur plusieurs lignes ou colonnes. | 3 |
| cssFloat | Définit ou renvoie l'alignement horizontal d'un élément. | 1 |
| font | Définit ou renvoie fontStyle, fontVariant, fontWeight, fontSize, lineHeight et fontFamily dans une seule déclaration. | 1 |
| fontFamily | Définit ou renvoie la famille de police du texte. | 1 |
| fontSize | Définit ou renvoie la taille de police du texte. | 1 |
| fontStyle | Définit ou renvoie si le style de police est normal, italique ou oblique. | 1 |
| fontVariant | Définit ou renvoie si la police est affichée en petites capitales. | 1 |
| fontWeight | Définit ou renvoie la graisse de la police. | 1 |
| fontSizeAdjust | Garantit la lisibilité du texte lorsque des polices de secours sont utilisées. | 3 |
| fontStretch | Sélectionne une police normale, condensée ou étendue à partir d'une bibliothèque de polices. | 3 |
| hangingPunctuation | Spécifie si un caractère de ponctuation peut être placé en dehors de la boîte de ligne. | 3 |
| height | Définit ou renvoie la hauteur d'un élément. | 1 |
| hyphens | Définit comment diviser les mots pour améliorer la mise en page des paragraphes. | 3 |
| icon | Permet aux auteurs de définir des styles pour un élément ayant une icône équivalente. | 3 |
| imageOrientation | Spécifie une rotation dans le sens horaire appliquée à une image par l'agent utilisateur. | 3 |
| justifyContent | Définit ou renvoie l'alignement (vertical) entre les éléments lorsque les éléments d'un conteneur flexible n'occupent pas tout l'espace disponible. | 3 |
| left | Définit ou renvoie la position gauche d'un élément positionné. | 2 |
| letterSpacing | Définit ou renvoie l'espace entre les caractères dans le texte. | 1 |
| lineHeight | Définit ou renvoie la distance entre les lignes dans le texte. | 1 |
| listStyle | Définit ou renvoie listStyleImage, listStylePosition et listStyleType dans une seule déclaration. | 1 |
| listStyleImage | Définit ou renvoie l'image utilisée comme marqueur d'élément de liste. | 1 |
| listStylePosition | Définir ou renvoyer la position du marqueur d'élément de liste. | 1 |
| listStyleType | Définir ou renvoyer le type de marqueur d'élément de liste. | 1 |
| margin | Définir ou renvoyer les marges de l'élément (peut avoir jusqu'à quatre valeurs). | 1 |
| marginBottom | Définir ou renvoyer la marge inférieure de l'élément. | 1 |
| marginLeft | Définir ou renvoyer la marge gauche de l'élément. | 1 |
| marginRight | Définir ou renvoyer la marge droite de l'élément. | 1 |
| marginTop | Définir ou renvoyer la marge supérieure de l'élément. | 1 |
| maxHeight | Définir ou renvoyer la hauteur maximale de l'élément. | 2 |
| maxWidth | Définir ou renvoyer la largeur maximale de l'élément. | 2 |
| minHeight | Définir ou renvoyer la hauteur minimale de l'élément. | 2 |
| minWidth | Définir ou renvoyer la largeur minimale de l'élément. | 2 |
| navDown | Définit ou renvoie où naviguer lors de l'utilisation de la touche de navigation flèche vers le bas. | 3 |
| navIndex | Définit ou renvoie l'ordre d'affichage de l'élément. | 3 |
| navLeft | Définit ou renvoie où naviguer lors de l'utilisation de la touche de navigation flèche vers la gauche. | 3 |
| navRight | Définit ou renvoie où naviguer lors de l'utilisation de la touche de navigation flèche vers la droite. | 3 |
| navUp | Définit ou renvoie où naviguer lors de l'utilisation de la touche de navigation flèche vers le haut. | 3 |
| opacity | Définit ou renvoie l'opacité de l'élément. | 3 |
| order | Définit ou renvoie l'ordre d'un élément flexible par rapport aux autres éléments flexibles dans le même conteneur. | 3 |
| orphans | Définit ou renvoie le nombre minimal de lignes qui doivent être réservées au bas de la page lorsqu'un saut de page se produit à l'intérieur de l'élément. | 2 |
| outline | Définit ou renvoie toutes les propriétés de contour dans une seule déclaration. | 2 |
| outlineColor | Définit ou renvoie la couleur du contour autour d'un élément. | 2 |
| outlineOffset | Décale le contour et le dessine au-delà du bord de la bordure. | 3 |
| outlineStyle | Définit ou renvoie le style du contour autour d'un élément. | 2 |
| outlineWidth | Définit ou renvoie la largeur du contour autour d'un élément. | 2 |
| overflow | Définit ou renvoie la manière de gérer le contenu qui apparaît en dehors de la boîte de l'élément. | 2 |
| overflowX | Spécifie s'il faut rogner les bords gauche/droite du contenu lorsqu'il dépasse la zone de contenu de l'élément. | 3 |
| overflowY | Spécifie s'il faut rogner les bords supérieur/inférieur du contenu lorsqu'il déborde de la zone de contenu de l'élément. | 3 |
| padding | Définit ou renvoie le padding de l'élément (peut comporter jusqu'à quatre valeurs). | 1 |
| paddingBottom | Définit ou renvoie le padding inférieur de l'élément. | 1 |
| paddingLeft | Définit ou renvoie le padding gauche de l'élément. | 1 |
| paddingRight | Définit ou renvoie le padding droit de l'élément. | 1 |
| paddingTop | Définit ou renvoie le padding supérieur de l'élément. | 1 |
| pageBreakAfter | Définit ou renvoie le comportement de saut de page après un élément. | 2 |
| pageBreakBefore | Définit ou renvoie le comportement de saut de page avant un élément. | 2 |
| pageBreakInside | Définit ou renvoie le comportement de saut de page à l'intérieur d'un élément. | 2 |
| perspective | Définit ou renvoie la perspective sous laquelle un élément 3D est visualisé. | 3 |
| perspectiveOrigin | Définit ou renvoie la position inférieure d'un élément 3D. | 3 |
| position | Définit ou renvoie le type de méthode de positionnement utilisé pour l'élément (static, relative, absolute ou fixed). | 2 |
| quotes | Définit ou renvoie le type de guillemets utilisés pour les citations imbriquées. | 2 |
| resize | Définit ou renvoie si la taille de l'élément peut être ajustée par l'utilisateur. | 3 |
| right | Définit ou renvoie la position droite d'un élément positionné. | 2 |
| tableLayout | Définit ou renvoie la méthode de disposition des cellules, lignes et colonnes d'un tableau. | 2 |
| tabSize | Définit ou renvoie la longueur du caractère de tabulation (tab). | 3 |
| textAlign | Définir ou renvoyer l'alignement horizontal du texte. | 1 |
| textAlignLast | Définir ou renvoyer l'alignement de la dernière ligne avant un saut de ligne forcé lorsque la propriété text-align est définie sur "justify". | 3 |
| textDecoration | Définir ou renvoyer la décoration du texte. | 1 |
| textDecorationColor | Définir ou renvoyer la couleur de la décoration du texte. | 3 |
| textDecorationLine | Définir ou renvoyer le type de ligne à utiliser pour la décoration du texte. | 3 |
| textDecorationStyle | Définir ou renvoyer le style de ligne dans la décoration du texte. | 3 |
| textIndent | Définir ou renvoyer l'indentation de la première ligne de texte. | 1 |
| textJustify | Définir ou renvoyer la méthode d'alignement à utiliser lorsque la propriété text-align est définie sur "justify". | 3 |
| textOverflow | Définir ou renvoyer ce qui doit se produire lorsque le texte déborde de l'élément qui le contient. | 3 |
| textShadow | Définir ou renvoyer l'effet d'ombre du texte. | 3 |
| textTransform | Définir ou renvoyer la capitalisation du texte. | 1 |
| top | Définir ou renvoyer la position supérieure d'un élément positionné. | 2 |
| transform | Appliquer une transformation 2D ou 3D à un élément. | 3 |
| transformOrigin | Définir ou renvoyer la position de l'élément transformé. | 3 |
| transformStyle | Définit ou renvoie la manière dont les éléments imbriqués sont rendus dans l'espace 3D. | 3 |
| transition | Une propriété raccourcie pour définir ou renvoyer quatre propriétés de transition. | 3 |
| transitionProperty | Le nom de la propriété CSS à laquelle l'effet de transition est appliqué. | 3 |
| transitionDuration | Définit ou renvoie le temps (en secondes ou millisecondes) nécessaire pour achever l'effet de transition. | 3 |
| transitionTimingFunction | Définit ou renvoie la courbe de vitesse de l'effet de transition. | 3 |
| transitionDelay | Définit ou renvoie quand l'effet de transition commence. | 3 |
| unicodeBidi | Définir ou renvoyer si le texte est réécrit pour prendre en charge plusieurs langues dans le même document. | 2 |
| verticalAlign | Définir ou renvoyer l'alignement vertical du contenu dans l'élément. | 1 |
| visibility | Définir ou renvoyer si l'élément doit être visible. | 2 |
| whiteSpace | Définir ou renvoyer la façon dont les tabulations, les sauts de ligne et les espaces dans le texte sont gérés. | 1 |
| width | Définir ou renvoyer la largeur de l'élément. | 1 |
| wordBreak | Définir ou renvoyer les règles de rupture de ligne pour les langues non-CJK. | 3 |
| wordSpacing | Définir ou renvoyer l'espace entre les mots dans le texte. | 1 |
| wordWrap | Permettre aux mots longs ou aux adresses URL de passer à la ligne suivante. | 3 |
| widows | Définir ou renvoyer le nombre minimum de lignes visibles qu'un élément doit avoir en haut d'une page. | 2 |
| zIndex | Définit ou renvoie l'ordre d'empilement des éléments positionnés. | 2 |