CSS et JS travaillent en étroite collaboration pour ajouter de nombreux effets uniques à nos pages. Afin d'obtenir un effet spécial, nous devons utiliser Javascript pour modifier dynamiquement les propriétés CSS d'une certaine balise.
Par exemple : lorsque la souris passe sur une image, on ajoute une bordure à l'image. Le code peut être le suivant : Quel doit être l'attribut après style en JavaScript ?
<script type="text/javascript">
fonction imageOver(e) {
e.style.border="1px rouge uni";
}
fonction imageOut(e) {
e.style.borderWidth=0;
}
</script>
<img src="css.png" onmouseover="imageOver(this)" onmouseout="imageOut(this)" />
Comparaison des étiquettes et des attributs des boîtes
de comparaison des attributs de style CSS JavaScript
Syntaxe CSS (insensible à la casse) Syntaxe JavaScript (sensible à la casse)
frontière frontière
bordure inférieure bordure inférieure
bordure-bottom-color
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
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
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
Balises de style et comparaison d'attributs
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
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
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
aligner verticalement