suchen

Heim  >  Artikel  >  Web-Frontend  >  JavaScript-Standalone-Change-CSS

JavaScript-Standalone-Change-CSS

WBOY
WBOYOriginal
2023-05-09 17:33:09410Durchsuche

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.

  1. 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");

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");
  1. 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";

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

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

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

JavaScript-Datei: 

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

myButton.onclick = function() {
  myInput.style.backgroundColor = "red";
};
  1. 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!

JavaScript css html 字符串 选择器 border
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So schreiben Sie die Einreichung eines Beitrags in JavascriptNächster Artikel：So schreiben Sie die Einreichung eines Beitrags in Javascript

In Verbindung stehende Artikel

Mehr sehen