Heim >Web-Frontend >js-Tutorial >Vergleichstabelle für JavaScript- und CSS-Stileigenschaften
Um einen bestimmten Spezialeffekt zu erzielen, müssen wir Javascript verwenden, um das CSS-Attribut eines bestimmten Tags dynamisch zu ändern.
Zum Beispiel: Wenn die Maus über ein Bild fährt, fügen wir dem Bild einen Rahmen hinzu. Der Code könnte wie folgt aussehen:
JavaScript-Code
[javascript] view plaincopyprint
[javascript ] view plaincopyprint?
Was sollte das Attribut nach dem Stil in JavaScript sein?
Vergleichstabelle für JavaScript-CSS-Stilattribute
CSS-Syntax (Groß-/Kleinschreibung wird nicht beachtet) JavaScript-Syntax (Groß-/Kleinschreibung beachtet)
Rahmengrenzeborder-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color borderColor
border-left borderLeft
border -left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
clear clear
float floatStyle
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
Farb- und Hintergrundbeschriftung und Attributvergleich
CSS-Syntax (Groß-/Kleinschreibung wird nicht beachtet) JavaScript-Syntax (Groß-/Kleinschreibung wird beachtet)
Hintergrundanhang HintergrundAttachment
Hintergrundfarbe Hintergrundfarbe
Hintergrundbild Hintergrundbild
Hintergrundposition Hintergrundposition
Hintergrundwiederholung HintergrundWiederholung
Farbfarbe
Stil-Tag- und Attributvergleich
CSS-Syntax (Groß-/Kleinschreibung wird nicht beachtet) JavaScript-Syntax (Groß-/Kleinschreibung beachtet)
Liste- style-type listStyleType
list-style-image listStyleImage
list-style-position listStylePosition
list-style listStyle
white-space whiteSpace
Textstil-Tag und -Attribut Vergleich
CSS-Syntax (Groß-/Kleinschreibung wird nicht beachtet) JavaScript-Syntax (Groß-/Kleinschreibung wird beachtet)
Schriftfamilie FontFamily
Schriftgröße Schriftgröße
Schriftstil Schriftart
Schriftvariante FontVariant
Font-Weight FontWeight
Textbeschriftung und Attributvergleich
CSS-Syntax (Groß-/Kleinschreibung wird nicht beachtet) JavaScript-Syntax (Groß-/Kleinschreibung beachtet)
Zeile -break lineBreak
line-height lineHeight
text-align textAlign
text-decoration textDecoration
text-indent textIndent
text-justify textJustify
text-transform textTransform
vertikal- vertikal ausrichtenAusrichten