CSS et JS travaillent en étroite collaboration pour ajouter de nombreux effets uniques à nos pages. Il existe également des cas connexes sur 52CSS.com. 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="01.png" onmouseover="imageOver(this)" onmouseout="imageOut(this)" />
JavaScript CSS Style table de comparaison d'attributs
étiquette de boîte et comparaison d'attributs
syntaxe CSS (non sensible à la casse) JavaScript syntaxe (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
padding-top
Les balises et attributs de couleur et d'arrière-plan paddingTop se comparent à
la syntaxe CSS (insensible à la casse) à la 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
Les balises et attributs de style se comparent à
la syntaxe CSS (insensible à la casse) et à la 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
les balises et attributs de style de texte
whiteSpace
se comparent àla syntaxe CSS (insensible à la casse) à la 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
Les balises et attributs de texte
fontWeight
se comparent àla syntaxe CSS (insensible à la casse) à la 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