Objet Style HTML DOM

Objet Style

L'objet Style représente une déclaration de style individuelle.

Propriété de l'objet Style

Propriété Description
alignContent Définir ou retourner la méthode d'alignement entre les lignes dans le conteneur élastique, lorsque les éléments ne utilisent pas tout l'espace disponible.
alignItems Définir ou retourner la méthode d'alignement des éléments dans le conteneur élastique.
alignSelf Définir ou retourner la méthode d'alignement des éléments sélectionnés dans le conteneur élastique.
animation Propriété abrégée de toutes les propriétés d'animation, à l'exception de animationPlayState.
animationDelay Définir ou retourner quand l'animation doit commencer.
animationDirection Définir ou retourner si l'animation doit jouer en sens inverse dans un cycle alternatif.
animationDuration Définir ou retourner le nombre de secondes ou de millisecondes nécessaires pour terminer une période d'animation.
animationFillMode Définir ou retourner la valeur appliquée en dehors du temps d'exécution de l'animation.
animationIterationCount Définir ou retourner le nombre de fois que l'animation doit être jouée.
animationName Définir ou retourner le nom de l'animation @keyframes.
animationPlayState Définir ou retourner si l'animation est en cours d'exécution ou en pause.
animationTimingFunction Définir ou retourner la courbe de vitesse de l'animation.
background Définir ou retourner toutes les propriétés de fond dans une seule déclaration.
backgroundAttachment Définir ou retourner si l'image de fond est fixe ou défile avec la page.
backgroundClip Définir ou retourner la zone de dessin du fond.
backgroundColor Définir ou retourner la couleur de fond de l'élément.
backgroundImage Définir ou retourner l'image de fond de l'élément.
backgroundOrigin 设置或返回背景图像的定位区域。
backgroundPosition Définir ou retourner la zone de localisation de l'image d'arrière-plan.
backgroundPosition Définir ou retourner la position de départ de l'image d'arrière-plan.
backgroundRepeat Définir ou retourner comment l'image d'arrière-plan doit être répétée (tapisserie).
backgroundSize Définir ou retourner la taille de l'image d'arrière-plan.
backfaceVisibility Définir ou retourner si l'élément est visible lorsque non orienté vers l'écran.
borderBottom Définir ou retourner tous les attributs borderBottom en une seule déclaration.
borderBottomColor Définir ou retourner la couleur de la bordure inférieure.
borderBottomLeftRadius Définir ou retourner la forme de la bordure en coin inférieur gauche.
borderBottomRightRadius Définir ou retourner la forme de la bordure en coin inférieur droit.
borderBottomStyle Définir ou retourner le style de la bordure inférieure.
borderBottomWidth Définir ou retourner la largeur de la bordure inférieure.
borderCollapse Définir ou retourner si la bordure du tableau doit être repliée en bordure simple.
borderColor Définir ou retourner la couleur de la bordure de l'élément (jusqu'à quatre valeurs peuvent être définies).
borderImage Propriété abrégée pour définir ou retourner tous les attributs borderImage.
borderImageOutset Définir ou retourner la quantité par laquelle l'aire de l'image de bord dépasse le boîtier du bord.
borderImageRepeat Définir ou retourner si l'image de bord doit être répétée, tournée ou étirée.
borderImageSlice Définir ou retourner la décalage vers l'intérieur de l'image de bord.
borderImageSource Définir ou retourner l'image utilisée comme bord.
borderImageWidth Définir ou retourner la largeur du bord de l'image.
borderLeft Définir ou retourner tous les attributs borderLeft en une seule déclaration.
borderLeftColor Définir ou retourner la couleur du bord gauche.
borderLeftStyle Définir ou retourner le style du bord gauche.
borderLeftWidth Définir ou retourner la largeur du bord gauche.
borderRadius Propriété abrégée pour définir ou retourner tous les quatre borderRadius.
borderRight Définir ou retourner tous les attributs borderRight en une seule déclaration.
borderRightColor Définir ou retourner la couleur du bord droit.
borderRightStyle Définir ou retourner le style de la bordure droite.
borderRightWidth Définir ou retourner la largeur de la bordure droite.
borderSpacing Définir ou retourner l'espace entre les cellules du tableau.
borderStyle Définir ou retourner le style de la bordure de l'élément (jusqu'à quatre valeurs peuvent être définies).
borderTop Définir ou retourner toutes les propriétés borderTop en une seule déclaration.
borderTopColor Définir ou retourner la couleur de la bordure supérieure.
borderTopLeftRadius Définir ou retourner la forme de la bordure en haut à gauche.
borderTopRightRadius Définir ou retourner la forme de la bordure en haut à droite.
borderTopStyle Définir ou retourner le style de la bordure supérieure.
borderTopWidth Définir ou retourner la largeur de la bordure supérieure.
borderWidth Définir ou retourner la largeur de la bordure de l'élément (jusqu'à quatre valeurs peuvent être définies).
bottom Définir ou retourner la position inférieure de l'élément positionné.
boxDecorationBreak Définir ou retourner le comportement du fond et des bordures de l'élément lors de la pagination, ou pour les éléments en ligne, lors du retour à la ligne.
boxShadow Ajouter une ou plusieurs ombres à un cadre (box).
boxSizing Permet de définir comment certains éléments s'adaptent à une certaine zone.
captionSide Définir ou retourner la position de la légende du tableau.
caretColor Définir ou retourner la couleur du curseur d'insertion.
clear Définir ou retourner la position de l'élément par rapport à l'objet flottant.
clip Définir ou retourner quelle partie de l'élément positionné est visible.
color Définir ou retourner la couleur du texte.
columnCount Définir ou retourner le nombre de colonnes que l'élément doit diviser.
columnFill Définir ou retourner la manière dont les colonnes sont remplies.
columnGap Définir ou retourner l'intervalle entre les colonnes.
columnRule Propriété abrégée pour définir ou retourner toutes les propriétés columnRule.
columnRuleColor Définir ou retourner la couleur régulière entre les colonnes.
columnRuleStyle Définir ou retourner le style régulier entre les colonnes.
columnRuleWidth Définir ou retourner la largeur régulière entre les colonnes.
columns Propriété abrégée pour définir ou retourner columnWidth et columnCount.
columnSpan Définir ou retourner le nombre de colonnes que l'élément doit couvrir.
columnWidth Définir ou retourner la largeur de la colonne.
content Utilisé avec les pseudo-éléments :before et :after, insérer le contenu généré.
counterIncrement Augmenter un ou plusieurs compteurs.
counterReset Créer ou réinitialiser un ou plusieurs compteurs.
cursor Définir ou retourner le type de curseur affiché par le pointeur de la souris.
direction Définir ou retourner la direction du texte.
display Définir ou retourner le type d'affichage de l'élément.
emptyCells Définir ou retourner si les bordures et le fond des cellules vides doivent être affichés.
filter Définir ou retourner le filtre d'image (effets visuels tels que le flou et la saturation).
flex Définir ou retourner la longueur de l'élément par rapport au reste.
flexBasis Définir ou retourner la longueur initiale de l'élément élastique.
flexDirection Définir ou retourner la direction de l'élément élastique.
flexFlow Propriété abrégée de flexDirection et flexWrap.
flexGrow Définir ou retourner la quantité de croissance de l'élément par rapport aux autres éléments.
flexShrink Définir ou retourner la manière de se rétrécir de l'élément par rapport aux autres éléments.
flexWrap Définir ou retourner si l'élément élastique doit dérouler.
cssFloat Définir ou retourner la manière d'aligner horizontalement l'élément.
font Définir ou retourner les attributs de police dans une seule déclaration.
fontFamily Définir ou retourner la famille de polices du texte.
fontSize Définir ou retourner la taille de la police du texte.
fontStyle Définir ou retourner si le style de la police est normal, italic ou oblique.
fontVariant Définir ou retourner si la police doit être affichée en petites majuscules.
fontWeight Définir ou retourner la gravité de la police.
fontSizeAdjust Maintenir la lisibilité du texte lors d'un repliement de police.
fontStretch Choisir un mode de transformation élastique à partir de la famille de polices.
hangingPunctuation Définir si les points de ponctuation peuvent être placés en dehors de la boîte de ligne.
height Définir ou retourner la hauteur de l'élément.
hyphens Définir comment diviser les mots pour améliorer la mise en page du paragraphe.
icon Permettre à l'auteur d'utiliser des équivalents iconiques pour définir le style des éléments.
imageOrientation Définir la rotation horaire ou à droite de l'agent utilisateur appliquée à l'image.
isolation Définir si un élément doit créer un contenu de pile nouveau.
justifyContent Définir ou retourner la manière d'aligner les éléments dans un conteneur élastique lorsque tous les espaces disponibles ne sont pas utilisés.
left Définir ou retourner la position latérale de l'élément de positionnement.
letterSpacing Définit ou retourne l'espace entre les caractères du texte.
lineHeight Définit ou retourne la distance entre les lignes de texte.
listStyle Définit ou retourne la liste de styles en une seule déclaration.
listStyleImage Définit ou retourne l'image utilisée comme marqueur de liste.
listStylePosition Définit ou retourne la position du marqueur de liste.
listStyleType Définit ou retourne le type de marqueur de liste.
margin Définit ou retourne la marge de l'élément (jusqu'à quatre valeurs peuvent être définies).
marginBottom Définit ou retourne la marge externe inférieure de l'élément.
marginLeft Définit ou retourne la marge externe gauche de l'élément.
marginRight Définit ou retourne la marge externe droite de l'élément.
marginTop Définit ou retourne la marge externe supérieure de l'élément.
maxHeight Définit ou retourne la hauteur maximale de l'élément.
maxWidth Définit ou retourne la largeur maximale de l'élément.
minHeight Définit ou retourne la hauteur minimale de l'élément.
minWidth Définit ou retourne la largeur minimale de l'élément.
navDown Définit ou retourne la position de navigation lorsque la touche flèche vers le bas est utilisée.
navIndex Définit ou retourne l'ordre de saut de l'élément.
navLeft Définit ou retourne la position de navigation lorsque la touche flèche gauche est utilisée.
navRight Définit ou retourne la position de navigation lorsque la touche flèche droite est utilisée.
navUp Définit ou retourne la position de navigation lorsque la touche flèche vers le haut est utilisée.
objectFit Spécifie comment le contenu de l'élément substitué doit s'adapter à la boîte définie par ses hauteurs et largeurs.
objectPosition Spécifie l'alignement du contenu de l'élément substitué dans sa boîte.
opacity Définit ou retourne le niveau d'opacité de l'élément.
order Définit ou retourne l'ordre de l'élément par rapport aux autres éléments élastiques.
orphans Définit ou retourne le nombre minimum de lignes que l'élément doit garder en bas de la page lors de la pagination interne.
outline Définit ou retourne toutes les propriétés outline en une seule déclaration.
outlineColor Définit ou retourne la couleur du contour de l'élément.
outlineOffset Décale le contour et le dessine à l'extérieur des bords.
outlineStyle Définit ou retourne le style du contour de l'élément.
outlineWidth Définit ou retourne la largeur de la contour de l'élément.
overflow Définit ou retourne comment traiter le contenu présenté en dehors de la boîte de l'élément.
overflowX Définit comment traiter les bords gauche/droit du contenu, s'ils dépassent la zone de contenu de l'élément.
overflowY Définir comment traiter les bords supérieur/inferieur du contenu, s'il dépasse la zone de contenu de l'élément.
padding Définir ou retourner la marge interne de l'élément (jusqu'à quatre valeurs peuvent être définies).
paddingBottom Définir ou retourner la marge inférieure interne de l'élément.
paddingLeft Définir ou retourner la marge gauche interne de l'élément.
paddingRight Définir ou retourner la marge droite interne de l'élément.
paddingTop Définir ou retourner la marge supérieure interne de l'élément.
pageBreakAfter Définir ou retourner le comportement de pagination après l'élément.
pageBreakBefore Définir ou retourner le comportement de pagination avant l'élément.
pageBreakInside Définir ou retourner le comportement de pagination à l'intérieur de l'élément.
perspective Définir ou retourner la perspective de visualisation de l'élément 3D.
perspectiveOrigin Définir ou retourner la position inférieure de l'élément 3D.
position Définir ou retourner le type de méthode de positionnement de l'élément (statique, relative, absolu ou fixe).
quotes Définir ou retourner le type de guillemets utilisés pour les citations intégrées.
resize Définir ou retourner si l'élément peut être redimensionné par l'utilisateur.
right Définir ou retourner la position droite de l'élément de positionnement.
scrollBehavior Définir si une animation de déplacement en douceur vers la position de la cible a lieu lorsque l'utilisateur clique sur un lien dans une boîte de défilement, au lieu d'un saut direct.
tableLayout Définir ou retourner le mode de mise en page des cellules, des lignes et des colonnes du tableau.
tabSize Définir ou retourner la longueur du tabulateur.
textAlign Définir ou retourner l'alignement horizontal du texte.
textAlignLast Définir ou retourner comment le dernier paragraphe ou la ligne précédant un saut de ligne forcé est aligné lorsque text-align est "justify".
textDecoration Définir ou retourner la décoration du texte.
textDecorationColor Définir ou retourner la couleur de la décoration du texte.
textDecorationLine Définir ou retourner le type de ligne dans la décoration du texte.
textDecorationStyle Définir ou retourner le style de la ligne dans la décoration du texte.
textIndent Définir ou retourner l'indentation du premier paragraphe de texte.
textJustify Définir ou retourner la méthode d'alignement utilisée lorsque text-align est "justify".
textOverflow Définir ou retourner ce qui se passe lorsque le texte dépasse la taille de l'élément conteneur.
textShadow Définir ou retourner l'effet d'ombre du texte.
textTransform Définir ou retourner la taille de la police du texte.
top Définir ou retourner la position supérieure de l'élément positionné.
transform Appliquer une transformation 2D ou 3D à l'élément.
transformOrigin Définir ou retourner la position de l'élément transformé.
transformStyle Définir ou retourner la manière dont les éléments imbriqués sont rendus dans l'espace 3D.
transition Utilisé pour définir ou retourner une propriété abrégée pour les quatre propriétés de transition.
transitionProperty Définir ou retourner les propriétés CSS de l'effet de transition.
transitionDuration Définir ou retourner le nombre de secondes ou de millisecondes nécessaires pour que l'effet de transition soit terminé.
transitionTimingFunction Définir ou retourner la courbe de vitesse de l'effet de transition.
transitionDelay Définir ou retourner quand le effet de transition commence.
unicodeBidi Définir ou retourner si le texte doit être couvert pour soutenir plusieurs langues dans le même document.
userSelect Définir ou retourner si le texte de l'élément peut être sélectionné.
verticalAlign Définir ou retourner l'alignement vertical du contenu de l'élément.
visibility Définir ou retourner si l'élément est visible.
whiteSpace Définir ou retourner comment traiter les tabulations, les retours chariot et les espaces dans le texte.
width Définir ou retourner la largeur de l'élément.
wordBreak Définir ou retourner les règles de saut de ligne pour les scripts non CJK.
wordSpacing Définir ou retourner l'espacement des mots dans le texte.
wordWrap Permettre à des mots longs et indécomposables de être coupés et repositionnés sur la ligne suivante.
widows Définir ou retourner le nombre minimum de lignes pour que l'élément soit visible en haut de la page.
zIndex Définir ou retourner l'ordre d'affichage en pile de l'élément positionné.

Accéder à l'objet Style

Les objets de style peuvent être accédés à partir de la partie head du document ou d'un élément HTML spécifique.

Exemple 1

Accéder aux objets de style de la partie head du document :

var x = document.getElementsByTagName("STYLE");

Essayez-le vous-même

Exemple 2

Accéder à l'objet de style de l'élément spécifié :

var x = document.getElementById("myH1").style;

Essayez-le vous-même

Création de l'objet Style

Exemple 1

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

Exemple 2

Vous pouvez également définir les attributs de style des éléments existants :

document.getElementById("myH1").style.color = "red";

Essayez-le vous-même

Pages liées

Tutoriel HTML :HTML CSS

Tutoriel CSS :Tutoriel CSS

Manuel de référence HTML :Balise <style> HTML

Manuel de référence CSS :Attributs CSS