De nombreuses propriétés de style CSS comportent des tirets dans leurs noms, qui sont interprétés comme des signes moins en JavaScript.
Par conséquent, les noms de propriété des objets CSS2Properties sont quelque peu différents des véritables noms de propriété CSS.
Si un nom de propriété CSS contient un ou plusieurs traits d'union, les traits d'union doivent être supprimés dans JS et les lettres d'origine immédiatement après les traits d'union doivent être remplacées par des majuscules.
Il convient de noter que float est un mot-clé en JS, donc dans JS float est écrit sous la forme cssFloat ou floatStyle.
Ce qui suit est un tableau de comparaison entre les propriétés CSS et l'encodage CSS en JavaScript :
Comparaison des étiquettes et des attributs de la boîte :
Code
Syntaxe CSS (insensible à la casse) Syntaxe JavaScript (sensible à la casse)
frontière frontière
bordure inférieure bordure inférieure
bordure-couleur-bas
border-bottom-style borderBottomStyle
bordure-bas-largeur
couleur de la bordure couleur de la bordure
bordure-gauche borduregauche
bordure-gauche-couleur bordureLeftColor
border-left-style borderLeftStyle
bordure-gauche-largeur bordureLeftWidth
bordure-droite bordureDroite
border-right-color borderRightColor
border-right-style borderRightStyle
bordure-droite-largeur
style de bordure style de bordure
bordure supérieure bordure supérieure
bordure-haut-couleur
border-top-style borderTopStyle
bordure-haut-largeur
largeur de la bordure largeur de la bordure
clair clair
float floatStyle(ie) cssFloat(FF)
marge marge
marge-bas margeBottom
marge-gauche margeGauche
marge-droite margeDroite
marge-haut margeTop
rembourrage
rembourrage-bas rembourrageBas
padding-left paddingLeft
padding-right paddingRight
rembourrage-top rembourrageTop
Comparaison des étiquettes et des attributs de couleur et d'arrière-plan :
Code
Syntaxe CSS (insensible à la casse) Syntaxe JavaScript (sensible à la casse)
contexte
arrière-plan-pièce jointe arrière-planAttachment
couleur d'arrière-plan couleur d'arrière-plan
image d'arrière-plan
position d'arrière-plan
arrière-plan-répéter
couleur couleur
Comparaison des balises de style et des attributs :
Code
Syntaxe CSS (insensible à la casse) Syntaxe JavaScript (sensible à la casse)
affichage affichage
type de style de liste listStyleType
liste-style-image listStyleImage
liste-style-position listStylePosition
style de liste Style de liste
espace blancespace blanc
Comparaison des étiquettes de style de texte et des attributs :
Code
Syntaxe CSS (insensible à la casse) Syntaxe JavaScript (sensible à la casse)
police de caractères
famille de polices fontFamily
taille de police taille de police
style de police style de police
font-variant fontVariant
font-weight fontWeight
Comparaison des étiquettes de texte et des attributs :
Code
Syntaxe CSS (insensible à la casse) Syntaxe JavaScript (sensible à la casse)
espacement des lettres letterSpacing
saut de ligne
hauteur de ligne
texte-aligner texteAlign
texte-décoration texteDécoration
texte-retrait texteRetrait
texte-justifier texteJustifier
transformation de texte transformation de texte
vertical-align verticalAlign