CSS und JS arbeiten eng zusammen, um unseren Seiten viele einzigartige Effekte hinzuzufügen. Um einen besonderen Effekt zu erzielen, müssen wir Javascript verwenden, um die CSS-Eigenschaften eines bestimmten Tags dynamisch zu ändern.
Beispiel: Wenn die Maus über ein Bild fährt, fügen wir dem Bild einen Rahmen hinzu. Der Code könnte wie folgt aussehen: Was sollte das Attribut nach dem Stil in JavaScript sein?
<script type="text/javascript">
Funktion imageOver(e) {
e.style.border="1px durchgehend rot";
}
Funktion imageOut(e) {
e.style.borderWidth=0;
}
</script>
<img src="css.png" onmouseover="imageOver(this)" onmouseout="imageOut(this)" />
Feldbeschriftung und Attributvergleich
der JavaScript-CSS-Stil-Attributvergleichstabelle
CSS-Syntax (Groß-/Kleinschreibung wird nicht beachtet) JavaScript-Syntax (Groß-/Kleinschreibung wird beachtet)
Grenzgrenze
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
klar klar
float floatStyle
Marge Marge
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
Polsterung
Polsterung unten PolsterungBottom
padding-left paddingLeft
padding-right paddingRight
Polsterung oben PolsterungTop
Farb- und Hintergrundbeschriftungs- und Attributvergleich
CSS-Syntax (Groß-/Kleinschreibung wird nicht beachtet) JavaScript-Syntax (Groß-/Kleinschreibung wird beachtet)
Hintergrundhintergrund
Hintergrund-Anhang Hintergrund-Anhang
Hintergrundfarbe Hintergrundfarbe
Hintergrundbild backgroundImage
Hintergrundposition Hintergrundposition
Hintergrundwiederholung Hintergrundwiederholung
Farbe Farbe
Stil-Tags und Attributvergleich
CSS-Syntax (Groß-/Kleinschreibung wird nicht beachtet) JavaScript-Syntax (Groß-/Kleinschreibung wird beachtet)
Anzeigeanzeige
Listenstiltyp listStyleType
Listenstil-Bild listStyleImage
Listenstilposition listStylePosition
Listenstil listStyle
Leerraum WhiteSpace
Vergleich von Textstilbeschriftung und -attributen
CSS-Syntax (Groß-/Kleinschreibung wird nicht beachtet) JavaScript-Syntax (Groß-/Kleinschreibung wird beachtet)
Schriftart
Schriftartenfamilie Schriftartenfamilie
Schriftgröße Schriftgröße
Schriftart-Schriftstil
Schriftartvariante FontVariant
Schriftstärke FontWeight
Textbeschriftungs- und Attributvergleich
CSS-Syntax (Groß-/Kleinschreibung wird nicht beachtet) JavaScript-Syntax (Groß-/Kleinschreibung wird beachtet)
Buchstabenabstand Buchstabenabstand
Zeilenumbruch Zeilenumbruch
Zeilenhöhe lineHeight
Textausrichtung textAlign
Textdekoration TextDekoration
Texteinzug textIndent
Textausrichtung textJustify
Texttransformation textTransform
Vertical-Align VerticalAlign