CSS-Eigenschaft mit JavaScript ändern

1. CSS-Eigenschaft mit getElementsByClassName in JavaScript ändern
2. Ändern Sie die CSS-Eigenschaft mit getElementById in JavaScript
3. Ändern Sie die CSS-Eigenschaft mit querySelector() in JavaScript
4. Fazit

HyperText Markup Language (HTML) ist statisch und normalerweise dumm. Dies bedeutet, dass es nicht in der Lage ist, Codeteile basierend auf dynamischen Bedingungen auszuführen. Es gibt keine Bestimmungen für if-Bedingungsblöcke zum Ein- und Ausblenden bestimmter HTML-Elemente oder-Tags, wenn eine Bedingung erfüllt ist. In solchen Szenarien müssen wir uns möglicherweise auf JavaScript oder jQuery verlassen, um die CSS-Stile eines HTML-Elements zu ändern.

Um den Stil eines HTML-Elements zu ändern, z. B. <div>, sollten Sie das <div> oder das jeweilige HTML-Element eindeutig auswählen. Jetzt können wir dies mit den folgenden Funktionen der Dokumentschnittstelle tun.

CSS-Eigenschaft mit getElementsByClassName in JavaScript ändern

getElementsByClassName durchsucht das gesamte HTML-Dokument und gibt ein Array aller HTML-Elemente zurück, deren Klassenname in den Parametern dieser Funktion übergeben wurde. Wir können es auch für ein Element verwenden, um die Unterelemente mit dem angegebenen CSS-Klassennamen zu finden. Die Syntax für getElementByClassName lautet wie folgt.

document.getElementsByClassName('green-class'));

Stil mit element.style einstellen

Sobald wir das Element eindeutig identifiziert haben, können wir die Methoden .style oder .className verwenden, um seine CSS-Stile zu ändern. Beachten Sie die folgenden Beispiele.

<div class="col-md-12">
  <div class="p-3">
      <label>Input String:</label><br>
      <input type="text" class="input-blue-border" id="b1" value="120">
      <button class="ml-3" onclick="changeStyle()">Change Border</button>
  </div>
</div>

function changeStyle() {
  document.getElementsByClassName('input-blue-border')[0].style.borderColor =
      'red';
}

Beachten Sie, dass wir in der Methode changeStyle() das Eingabeelement mit der Methode document.getElementsByClassName("input-blue-border") abfragen. Es gibt ein Array mit ausgewählten Elementen zurück. Wir wählen das erste Element des Arrays aus und ändern seine Rahmenfarbe mit .style.borderColor = "red".

Legen Sie den Stil mit element.className fest

Mit element.className können Sie verschiedene Stilparameter eines HTML-Elements ändern, indem Sie diese als Klasse zusammenfassen und dem ausgewählten Element mit element.className den Klassennamen zuweisen. Diese Methode ist hilfreich, insbesondere in Szenarien, in denen ein Fehler in einem Eingabefeld angezeigt werden muss. In diesem Fall müssen wir die Rahmenfarbe des Eingabefelds in rote Farbe und den inneren Text der Eingabe in rote Farbe ändern. Daher können wir diese Stile als Klasse zusammenfassen und sie mit dem Attribut element.className dem Element zuweisen. Der folgende Code veranschaulicht die Fehlerbehandlung.

<div class="col-md-12">
  <div class="p-3">
      <label>Input String:</label><br>
      <input type="text" class="input-blue-border" id="b1" value="120">
      <button class="ml-3" onclick="changeClass()">Change Border</button>
  </div>
</div>

function changeClass() {
  document.getElementsByClassName('input-blue-border')[0].className =
      'input-error';
}

Die Klasse input-error verfügt über einige Attribute, mit denen die Rahmenfarbe und die Schriftfarbe des Eingabefelds auf Rot gesetzt werden.

Bemerkungen

• Die Methode getElementByClassName() gibt ein Array von Elementen zurück, die den als Argumente übergebenen Klassennamenwert qualifizieren.
• getElementByClassName() kann verwendet werden, wenn Stiländerungen auf mehr als ein Element angewendet werden, indem das von dieser Methode zurückgegebene Array durchlaufen wird.
• Sobald das Element ausgewählt ist, setzt element.style.<style attribute> das bestimmte Stilattribut auf das ausgewählte Element.
• In ähnlicher Weise hilft element.className dabei, mehr als eine Stiländerung für das ausgewählte HTML-Element festzulegen, indem diese Stilattribute als CSS-Klasse zusammengefasst werden.

Ändern Sie die CSS-Eigenschaft mit getElementById in JavaScript

Wenn einem HTML-Element eine eindeutige ID zugewiesen ist, können wir sie abfragen und ihren Stil mit der Funktion getElementById() der Schnittstelle Document ändern. Es ist die am weitesten verbreitete Methode von Webentwicklern. Meistens bleiben die einem div zugewiesenen IDs eindeutig, sodass beim Ausführen der Funktion getElementById() andere HTML-Elemente nicht ausgewählt werden. Die Syntax für getElementById() ist wie unten dargestellt.

document.getElementById("parent-1"));

Wenn wir ein eindeutiges Element auswählen, sind die Stiländerungen in diesem Fall einfach. Die folgenden Codes zeigen die Wege. Es ähnelt den zuvor erwähnten, mit dem Unterschied, wie wir nach einem Element fragen. Hier identifizieren wir HTML-Knoten eindeutig mit der Element-ID.

document.getElementById('b1').style.borderColor = 'red';
document.getElementById('b1').className = 'input-error';

Bemerkungen

• Im Gegensatz zur Methode getElementByClassName() gibt die Methode getElementById() nur ein Objekt zurück, das das von der Abfrage ausgewählte Knotenelement ist.
• Der beabsichtigte HTML-Code muss über ein ID-Attribut verfügen, damit die Methode getElementById() funktioniert.
• Wenn mehr als ein HTML-Knoten dieselbe ID hat, gibt die Methode getElementById() das erste Element mit der angegebenen ID zurück.
• Im Gegensatz zu getElementByClassName() können die Stiländerungen direkt auf das von der Funktion getElementById() zurückgegebene Objekt angewendet werden, da ein Objekt anstelle eines Arrays zurückgegeben wird.

Ändern Sie die CSS-Eigenschaft mit querySelector() in JavaScript

Die Methode querySelector() ist eine Obermenge von Funktionen, die von den Elementauswahlmechanismen angeboten werden. Es verfügt über die kombinierte Leistung der Methoden getElementsByClassName() und getElementById(). Mit dieser Methode können wir das HTML-Element beim Schreiben von CSS-Klassen auf dieselbe Weise auswählen. Es kann zum Auswählen eines Elements nach ID, Klasse und sogar nach HTML-Tag verwendet werden. Es verhält sich in Bezug auf den Rückgabetyp ähnlich wie die Methode getElementById(). querySelector() gibt nur das erste HTML-Knotenelement zurück, das die in den Parametern genannten Kriterien erfüllt. Die für querySelector() verwendete Syntax lautet wie folgt:

document.querySelector('#<id of div>');
document.querySelector('.<css class name>');
document.querySelector('<HTML tag eg: div>');

Daher kann der Stil auch hier durch Hinzufügen von .style.borderColor oder .className auf das ausgewählte HTML-Element angewendet werden. Wenn wir dieselbe HTML-Struktur verwenden und die Methode onclick in changeStyle() ändern, können wir den neuen Stil dynamisch umsetzen, indem wir den Code wie unten im JavaScript beschrieben hinzufügen:

<button class="ml-3" onclick="changeStyle()">Change Border</button>

function changeStyle() {
  document.querySelector('.input-blue-border').style.borderColor = 'red';
}

Wenn wir die CSS-Klasse der Eingabe anstelle einer Stiländerung ändern möchten, müssen wir im obigen Beispiel das Attribut .className() anstelle von .style.borderColor verwenden.

<button class="ml-3" onclick="changeClass()">Change Border</button>

function changeClass() {
  document.querySelector('.input-blue-border').className = 'input-error';
}

Bemerkungen

• Es lohnt sich, den Rückgabetyp der Funktion document.querySelector() im Auge zu behalten. Anstatt alle HTML-Objekte zurückzugeben, die die Abfrage erfüllen, wird das erste Element zurückgegeben, das der Abfragebedingung entspricht.
• Das Schöne an der Verwendung von querySelector() ist, dass wir es unter verschiedenen Umständen verwenden können. Möglicherweise wird es basierend auf der ID des HTML-Elements oder seiner CSS-Klasse oder sogar mit dem HTML-Tag-Namen abgefragt.
• Dynamische Änderungsstile von mehr als einem Div, die die Abfragekriterien erfüllen, sind mit querySelector() möglicherweise nicht möglich, da ein Objekt anstelle eines Arrays von HTML-Elementen zurückgegeben wird, die die Abfragebegriffe übergeben.

Fazit

Um den Stil eines HTML-Elements zur Laufzeit zu ändern, können Sie die Attribute .style oder .className des ausgewählten HTML-Elements verwenden. Die Herausforderungen werden bei der Auswahl des Ziel-HTML-Knotens bewältigt. Es gibt verschiedene Möglichkeiten, HTML-Knoten eindeutig auszuwählen. Wir können die Methode getElementsByClassName() verwenden, die den Namen einer CSS-Klasse verwendet, um den HTML-Knoten abzufragen. Oder wählen Sie ein Element eindeutig aus, indem Sie ihm eine ID zuweisen und es mit .getElementById() abfragen oder die Mehrzweckmethode querySelector() verwenden, die allen Umständen entspricht und die Abfrage anhand der an sie übergebenen Parameter versteht.