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

Box-Tag- und Attributvergleich

CSS-Syntax (Groß-/Kleinschreibung wird nicht beachtet) JavaScript-Syntax (Groß-/Kleinschreibung beachtet)

Rahmengrenze

border-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)

Hintergrundhintergrund

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)

Anzeigeanzeige

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)

Schriftart Schriftart

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)

Buchstabenabstand Buchstabenabstand

Zeile -break lineBreak
line-height lineHeight
text-align textAlign
text-decoration textDecoration
text-indent textIndent
text-justify textJustify
text-transform textTransform
vertikal- vertikal ausrichtenAusrichten