Stil eines HTML-Formularelements in JavaScript festlegen

1. Style zu einem HTML-Element in JavaScript hinzufügen
2. Anwenden von Stil auf Elemente mit dem Klassennamen in JavaScript
3. Anwenden von Stil auf Tags in JavaScript

Einer der Anwendungsfälle zum Festlegen eines benutzerdefinierten Stils für ein HTML-Element zur Laufzeit ist die Durchführung von Validierungen in Formularen. Wir müssen das Element rot markieren und einen Validierungstext anzeigen, wie etwa Username field cannot be left empty. Es gibt verschiedene Möglichkeiten, mit JavaScript Stilparameter für ein HTML-Element zur Laufzeit festzulegen. Wir können neue Stile hinzufügen und auch den vorhandenen Stil ändern. Im Folgenden finden Sie einige Möglichkeiten, wie wir mithilfe von JavaScript den CSS-Stil für ein HTML-Element festlegen können.

Style zu einem HTML-Element in JavaScript hinzufügen

Wir können den Stil eines Elements mit dem JavaScript-Attribut .style ändern. Davor müssen wir das HTML-Element abfragen und das .style-Attribut setzen. Es gibt verschiedene Möglichkeiten, ein HTML-Element in JavaScript abzufragen, die wie folgt sind, aber die am häufigsten verwendete ist die Methode document.getElementById().

• getElementById(): der Dokumentschnittstelle in JavaScript wird verwendet, um ein HTML-Element anhand seiner ID abzufragen. Normalerweise weisen die Entwickler beim Entwerfen einer Webseite den HTML-Elementen eine eindeutige ID zu. getElementById() gibt das Element zurück, das die in den Parametern der Funktion getElementById() angegebene ID hat. Wenn mehrere Elemente mit derselben ID vorhanden sind, wird das erste Element mit der angegebenen ID zurückgegeben.
• getElementsByClassName(): Eine andere Möglichkeit, ein HTML-Element abzufragen, ist mit seinem zugewiesenen Klassennamen. Dies sind CSS-Klassennamen, die normalerweise zum Dekorieren des Elements verwendet werden. Da mehrere HTML-Elemente dieselben CSS-Klassennamen haben können, gibt die Funktion ein Array von HTML-Elementen zurück. Wir können wählen, ob wir den spezifischen Stil eines Elements oder aller von der Funktion getElementsByClassName() zurückgegebenen Elemente ändern oder hinzufügen möchten.
• getElementsByName(): Ähnlich wie wir ein HTML-Element mit seinem CSS-Klassennamen auswählen, verwendet die Funktion getElementsByName() das name-Attribut, um das erwartete HTML-Element zu filtern. In diesem Fall kann es mehr als ein HTML-Element mit demselben Namen geben. Daher gibt es ein Array von HTML-Elementen mit dem Attribut name zurück, das dem in seinen Parametern übergebenen Attribut entspricht.
• getElementsByTagName(): wird verwendet, wenn wir bestimmte HTML-Tags wie die Tags <div>, <p>, <li> usw. auswählen müssen. Dies erleichtert das Anwenden eines Stils oder Sets von Stilen auf alle <div>-Elemente auf einmal. Die Funktion getElementsByTagName() gibt ein Array von Elementen zurück, deren Tag-Namen im Parameter an die Funktion übergeben wurden. Es kann mehr als ein HTML-Tag geben, dessen Stile möglicherweise in einer einzigen Aufnahme geändert werden müssen.
• querySelector(): ist wie eine Master-Methode zum Abrufen eines Elements. Um die Verwendung von Parametern zu verstehen, die von dieser JavaScript-Funktion akzeptiert werden, stellen Sie sich die Verwendung von Selektoren zum Abfragen von HTML-Elementen in CSS vor. Wir können Kombinationen von Tag-Namen verwenden wie document.querySelector("div span") (um die gesamte Spanne innerhalb der divs auszuwählen), document.querySelector("#elementID") (um ein Element anhand seiner ID abzufragen ), document.querySelector(".sample-css") (um Elemente abzufragen, die den CSS-Klassennamen sample-css haben) usw. Es gibt das erste Element zurück, das die als Parameter an die Funktion übergebenen Kriterien erfüllt.
• querySelectorAll: ähnelt querySelector() in allen Aspekten außer dem Rückgabetyp. Anstatt wie bei der Funktion querySelector() nur das erste Element zurückzugeben, das die Kriterien erfüllt, gibt die Funktion querySelectorAll() alle HTML-Elemente zurück, die die in Parametern genannten Bedingungen an die Methode erfüllen. Sobald ein HTML-Element ausgewählt ist, verwenden wir das Attribut .style, gefolgt vom Stilnamen, den wir ändern oder hinzufügen möchten. Im folgenden Code versuchen wir beispielsweise, die Hintergrundfarbe eines Elements mit der ID als username zu ändern.

<div id="username">
    <label>User Name: </label>
    <input type="text" id="username" name="UserName">
</div>

window.onload = function() {
  document.getElementById('username').style.backgroundColor = 'green';
}

Wenn das ausgewählte HTML-Element das style-Attribut (zB die Hintergrundfarbe) bereits gesetzt hat, dann wird es durch den folgenden Code geändert. Und wenn kein Stilattribut vorhanden ist, wird zur Laufzeit vom JavaScript-Code ein neuer Stil hinzugefügt.

Anwenden von Stil auf Elemente mit dem Klassennamen in JavaScript

Mit der JavaScript-Funktion getElementsByClassName() können wir ein Element über den Klassennamen abfragen. Sobald die Elemente ausgewählt sind, können wir den Stil der Elemente mit dem Attribut .style hinzufügen oder ändern. Diese Methode wird angewendet, wenn wir zusätzliche CSS-Attribute in dieser bestimmten CSS-Klasse des Elements benötigen. Der folgende Code zeigt die Verwendung.

<div id="username" class="blue-bg">
    <label>User Name: </label>
    <input type="text" id="username" name="UserName">
</div>

window.onload = function() {
  document.getElementsByClassName('blue-bg')[0].style.backgroundColor = 'green';
}

Hinweis: Hier liefert die Funktion getElementsByClassName("blue-bg") ein Array von Elementen zurück. Daher ist es notwendig, den Index des Elements auszuwählen, auf das wir die Stile anwenden möchten. Wenn das style-Attribut bereits von einer CSS-Klasse oder einem Inline-Stil gesetzt ist, wird es vom .style-Attribut überschrieben. Falls noch nicht festgelegt, wird ein neues Attribut hinzugefügt, um den Stil des anvisierten HTML-Elements festzulegen.

Anwenden von Stil auf Tags in JavaScript

Falls wir allen div oder allen span style hinzufügen müssen, können wir die Funktion .getElementsByTagName() verwenden. Es fragt das DOM nach den Tag-Namen ab. Es gibt eine Sammlung von HTML-Elementen zurück, die dem als Parameter übergebenen Tag-Namen entsprechen. Sobald die Funktion die HTML-Elemente zurückgegeben hat, können wir das style-Attribut auf dieses Element anwenden, indem wir seinen Index verwenden. Der folgende Code führt es aus.

<div id="output">Hello World!!</div>
<form name="LoginForm">
    <div id="username" class="blue-bg">
        <label>User Name: </label>
        <input type="text" id="username" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
    <div>
        <label>Description: </label>
        <textarea name="description"></textarea>
    </div>
    <div>
        <label>Occupation: </label>
        <select id="occupationSelect" autofocus>
            <option>Student</option>
            <option>Teacher</option>
            <option>Engineer</option>
        </select>
    </div>
</form>

window.onload = function() {
  document.getElementsByTagName('div')[0].style.backgroundColor = 'green';
}

Beim Ausführen des obigen Codes erhält das erste div (<div id="output">Hello World!!</div>) die Hintergrundfarbe grün. Beachten Sie, dass wir beim Targeting auf das erste div den Index als 0 verwenden (document.getElementsByTagName("div")[0]). Ebenso können wir dem body-Tag mit document.getElementsByTagName("body")[0].style.backgroundColor = "green" Style-Attribute zuweisen. Da in einem HTML-Dokument nur ein body-Tag erlaubt ist, können wir das body-Element direkt abfragen und mit dem Attribut .body der Schnittstelle document style-Attribute darauf anwenden. Daher sieht der Code aus wie document.body.style.backgroundColor = "green".