Wie Javascript CSS aufruft-Front-End-Fragen und Antworten-php.cn

Wie Javascript CSS aufruft

PHPz

Freigeben： 2023-05-16 09:39:07

Original

1037 Leute haben es durchsucht

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>

Nach dem Login kopieren

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";

Nach dem Login kopieren

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">

Nach dem Login kopieren

let link = document.querySelector("link");
link.href = "new-styles.css";

Nach dem Login kopieren

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>

Nach dem Login kopieren

let style = document.querySelector("style");
style.innerHTML = "p { color: blue; font-size: 20px; }";

Nach dem Login kopieren

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>

Nach dem Login kopieren

let p = document.querySelector("p");
p.classList.add("large");
p.classList.remove("red");

Nach dem Login kopieren

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!