JavaScript-Standalone-Change-CSS-Front-End-Fragen und Antworten-php.cn

JavaScript-Standalone-Change-CSS

WBOY

Freigeben： 2023-05-09 17:33:09

Original

374 Leute haben es durchsucht

Wenn wir der Webseite einige dynamische Effekte hinzufügen möchten, ist JavaScript möglicherweise die beste Wahl. Eine der häufigsten Anforderungen besteht darin, dass der Stil der Webseitenelemente dynamisch geändert werden muss, wenn der Benutzer bestimmte Vorgänge auf der Webseite ausführt. An dieser Stelle können wir JavaScript verwenden, um den CSS-Stil zu ändern.

Konkret können wir Elemente auf der Webseite über JavaScript auswählen und dann die entsprechenden CSS-Eigenschaften ändern. Im Folgenden zeige ich Ihnen, wie Sie CSS-Stile eigenständig mit JavaScript ändern können.

Elemente auswählen

Zuerst müssen wir das Webelement auswählen, dessen Stil wir ändern möchten. Es gibt viele Möglichkeiten, Elemente auszuwählen. Hier beschreibe ich die beiden häufigsten.

Methode eins besteht darin, die Methode document.getElementById() zu verwenden, die die Übergabe eines String-Parameters erfordert, der die ID des Elements darstellt. Beispiel:

var element = document.getElementById("myElement");

Nach dem Login kopieren

Methode 2 besteht darin, die Methode document.querySelector() zu verwenden, die die Übergabe eines CSS-Selektors erfordert, um das auszuwählende Element darzustellen. Zum Beispiel:

var element = document.querySelector(".myClass");

Nach dem Login kopieren

Stil ändern

Sobald wir das Element ausgewählt haben, dessen Stil wir ändern möchten, können wir JavaScript verwenden, um seinen Stil zu ändern. Hier sind einige gängige CSS-Stileigenschaften und wie man sie ändert.

2.1. Ändern Sie die Hintergrundfarbe des Elements

Wir können die Eigenschaft style.backgroundColor verwenden, um die Hintergrundfarbe des Elements zu ändern. Zum Beispiel:

element.style.backgroundColor = "red";

Nach dem Login kopieren

2.2 Ändern Sie die Textfarbe des Elements

Wir können das Attribut style.color verwenden, um die Textfarbe des Elements zu ändern. Zum Beispiel:

element.style.color = "blue";

Nach dem Login kopieren

2.3 Ändern Sie die Schriftgröße des Elements

Wir können das Attribut style.fontSize verwenden, um die Schriftgröße des Elements zu ändern. Zum Beispiel:

element.style.fontSize = "20px";

Nach dem Login kopieren

2.4 Ändern Sie den Rahmenstil des Elements

Wir können das Attribut style.border verwenden, um den Rahmenstil des Elements zu ändern. Es erfordert die Übergabe eines String-Parameters, der den Stil, die Breite und die Farbe des Rahmens angibt. Zum Beispiel:

element.style.border = "1px solid black";

Nach dem Login kopieren

Beispiel

Hier ist ein Beispiel für die Verwendung von JavaScript zum eigenständigen Ändern von CSS-Stilen. Dieses Beispiel enthält eine HTML-Datei und eine JavaScript-Datei, die die Hintergrundfarbe des Textfelds in Rot ändert, wenn der Benutzer auf eine Schaltfläche klickt. Sie können beide Dateien im selben Ordner speichern und die HTML-Datei in einem Browser öffnen, um den Effekt zu sehen.

HTML-Datei:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript 修改 CSS 样式</title>
  <style>
    input {
      padding: 10px;
      font-size: 16px;
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <h1>JavaScript 修改 CSS 样式</h1>
  <input type="text" id="myInput">
  <button id="myButton">单机我</button>
  <script src="style.js"></script>
</body>
</html>

Nach dem Login kopieren

JavaScript-Datei:

var myButton = document.getElementById("myButton");
var myInput = document.getElementById("myInput");

myButton.onclick = function() {
  myInput.style.backgroundColor = "red";
};

Nach dem Login kopieren

Zusammenfassung

Die eigenständige Verwendung von JavaScript zum Ändern von CSS-Stilen kann uns dabei helfen, dynamischere Effekte auf Webseiten hinzuzufügen. Wir können diese Funktion erreichen, indem wir das Element auswählen und den Stil ändern. In der Praxis können wir auch mehr CSS-Eigenschaften und JavaScript-Methoden verwenden, um komplexere Effekte zu erzielen.

Das obige ist der detaillierte Inhalt vonJavaScript-Standalone-Change-CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!