Bei Webdesign und -entwicklung werden JavaScript und CSS zusammen verwendet, um eine Vielzahl beeindruckender visueller Effekte und interaktiver Funktionen zu erzielen. Wie JavaScript CSS aufruft, ist eine häufig gestellte Frage, die im Folgenden ausführlich beschrieben wird.
1. Der Inline-Stil
Der Inline-Stil kann direkt auf das Stilattribut von HTML-Tags angewendet werden, wie unten gezeigt:
<p style="color: red; font-size: 16px;">这是一个红色的段落</p>
in JavaScript Inline Stile können durch Ändern des Stilattributs des Elements geändert werden. Zum Beispiel:
let p = document.querySelector("p");
p.style.color = "blue";
p.style.fontSize = "20px";Dadurch wird der rote Absatz oben in einen blauen Absatz mit einer Schriftgröße von 20 Pixel umgewandelt.
2. Externes Stylesheet
Ein externes Stylesheet ist eine Methode zum Platzieren einer Sammlung von CSS-Regeln in einer separaten Datei, indem Sie die Datei mit dem HTML-Dokument verknüpfen können dieselben Stilregeln wiederverwenden. In JavaScript kann ein Stylesheet geändert werden, indem das href-Attribut des Elements im Dokument geändert wird, das mit dem Stylesheet verknüpft ist. Zum Beispiel:
<link rel="stylesheet" href="styles.css">
let link = document.querySelector("link");
link.href = "new-styles.css";Dadurch wird das Stylesheet im Dokument, das mit „styles.css“ verknüpft ist, in ein Stylesheet geändert, das mit „new-styles.css“ verknüpft ist.
3. Internes Stylesheet
Ein internes Stylesheet ist eine Methode zum Platzieren einer Sammlung von CSS-Regeln zwischen den Head- oder Body-Tags eines HTML-Dokuments. In JavaScript können interne Stylesheets geändert werden, indem das Stilattribut des Dokuments direkt geändert wird. Zum Beispiel:
<head>
<style>
p {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<p>这是一个红色的段落</p>
</body>let style = document.querySelector("style");
style.innerHTML = "p { color: blue; font-size: 20px; }";Dadurch wird der rote Absatz oben in einen blauen Absatz mit einer Schriftgröße von 20 Pixel umgewandelt.
4. Klassenname
Ein Klassenname ist ein Name, der die Stilregeln für bestimmte Elemente definiert. In JavaScript können eine oder mehrere Klassen hinzugefügt oder entfernt werden, indem das classList-Attribut eines Elements geändert wird. Zum Beispiel:
<style>
.red {
color: red;
}
.large {
font-size: 20px;
}
</style>
<p class="red">这是一个红色的段落</p>let p = document.querySelector("p");
p.classList.add("large");
p.classList.remove("red");Dadurch wird der rote Absatz oben in einen Absatz mit einer Schriftgröße von 20 Pixel umgewandelt.
Zusammenfassung:
JavaScript kann verschiedene Methoden zum Aufrufen von CSS verwenden, darunter Inline-Stile, externe Stylesheets, interne Stylesheets und Klassennamen. Diese Methoden können das Document Object Model (DOM) direkt über JavaScript bedienen, um visuelle Effekte und interaktive Funktionen zu erzielen. Wenn Sie diese Fähigkeiten beherrschen, können Sie den Stil und das Verhalten von Webseiten besser verwalten und steuern.
Das obige ist der detaillierte Inhalt vonWie Javascript CSS aufruft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
