So erhalten und ändern Sie die Attribute, Klassen und Stile des Elements über JavaScript

Oft müssen Webseiten ihre Elemente ändern oder wie ihre Elemente abhängig von den Aktionen oder Entscheidungen des Benutzers aussehen. Das Ändern der Elemente, Attribute, Klassen und Stile einer Webseite ist mit Hilfe der Dom (Dokumentobjektmodell). Das DOM wurde als Standard dafür gesetzt, wie jeder Browser die HTML -Webseite interpretiert und wie er auf die verschiedenen Elemente auf der Webseite zugreifen wird W3C (World Wide Web Consortium).

JavaScript interagiert auch mit den Elementen einer HTML.

Erstellen wir zuerst eine HTML -Seite mit verschiedenen Elementen, indem wir die folgenden Codezeilen verwenden:

Ändern Sie meinen Stil

Ändern Sie mein Attribut

Ändere meine Klasse

Diese Codezeilen geben uns die folgende Webseite:

So erhalten Sie Elemente in JavaScript

Bevor wir uns ansehen, wie Elemente mit JavaScript ändert. Um die Referenz des Elements zu erhalten, können wir eine der verschiedenen Funktionen verwenden, die von JavaScript bereitgestellt werden, wie z. B.:

• GetElementById ()
• GetElementByClassName ()
• GetElementByName ()
• GetElementByTagName ()
• GetElementByTagnamens ()

Sie sind alle ziemlich einfach zu bedienen und zu verstehen mit ihrem Namen. Angenommen, wir haben ein Element in unserem HTML mit einer ID von “xyzUm auf die Daten dieses Elements zuzugreifen, verwenden wir die folgende Zeile in der JavaScript -Datei oder im Skript -Tag:

var obj = dokument.GetElementById ("xyz");

In ähnlicher Weise würden wir die Funktion "GetElementByClassName () verwenden, wenn wir versuchen, mit seinem Klassennamen auf ein Element zugreifen zu können.

Ändern des Stils eines Elements

Wenn wir uns unsere HTML -Datei ansehen, wissen wir, dass die DIV, in der „mein Stil verändert“ steht, die ID von “hatStil ändern”, Also werden wir mit der folgenden Zeile darauf zugreifen:

var cs = dokument.GetElementById ("Changestyle");

Jetzt, da wir unsere Elementreferenz in der variablen „CS“ haben, können wir mit der Style -Funktion zugreifen Dot-Operator Und von dort aus können wir seine unterschiedlichen Stilwerte ändern. Wenn wir beispielsweise die Hintergrundfarbe in Gelb ändern würden, würden wir die Linie verwenden:

CS.Stil.HintergrundColor = "Yellow";

Nach dem Ausführen der HTML -Datei sehen Sie die folgende Ausgabe:

Sie können auch im obigen Bild sehen, dass wir den Stil des Elements ändern konnten.

Ändern Sie die Klasse eines Elements mit JavaScript

Wir haben das Element mit der ID „ChangeClass“, die eine Klasse von „Myclass“ hat, um die Klasse dieses Elements zu ändern. Als erstes müssen wir auf dieses Element in JavaScript verweisen, indem wir die folgende Codezeile verwenden:

var cc = dokument.GetElementById ("ChangeClass");

Jetzt, da wir die Elementreferenz in der Variablen haben “CCWir können auf das Attribut des Klassens zugreifen, indem wir die verwenden classlist () Funktion. Um eine neue Klasse „NewClass“ in derselben Variablen hinzuzufügen, können wir die folgende Codezeile verwenden:

CC.Klasse.add ("NewClass");

Wenn Sie die Konsole des Entwicklers öffnen und das Klassenattribut überprüfen, finden Sie das folgende Ergebnis:

Wie Sie sehen können, konnten Sie das Klassenattribut des Elements eine weitere Klasse hinzufügen, indem Sie JavaScript verwenden. Wenn Sie eine bereits vorhandene Klasse aus der Liste entfernen möchten, können Sie die folgende Codezeile verwenden:

CC.Klasse.entfernen ("myclass");

Nach der Ausführung der obigen Zeile sehen Sie die folgenden Ergebnisse in der Konsole des Entwicklers:

Und da gehst du; Sie konnten eine Klasse aus der Klassenliste eines Elements mit JavaScript entfernen.

Das Attribut des Elements ändern

JavaScript hat eine Funktion namens "SetAttribute”, Das es dem Benutzer ermöglicht, den Wert eines beliebigen Attributs des Elements zu ändern, unabhängig davon. Um beispielsweise die Klasse eines Elements zu ändern, lassen Sie uns zunächst auf das Element zeigen, das steht: „Ändern Sie mein Attribut, verwenden wir die folgende Codezeile:

var ca = dokument.GetElementById ("Changeattr");

Und dann können wir die Funktion „setAttribute“ verwenden wie:

ca.setAttribute ("Klasse", "Hallo");

Jetzt können wir diese Veränderung in den Entwickler -Tools wie beobachten

Wir können dem Element sogar unsere eigenen Attribute zuweisen, indem wir die Funktion verwenden, z. B. wenn wir ein Attribut von “wünschen“Newattr"Zu diesem Element mit einem Wert von"Erledigt”, Wir können das hinzufügen, indem wir die folgende Codezeile verwenden:

ca.setAttribute ("newAttr", "done");

Und wenn wir das Element in der Entwicklerkonsole beobachten, können wir das folgende Ergebnis sehen:

Wie im obigen Bild klar ist, konnten wir ein neues Attribut namens hinzufügen “Newattr”Zu unserem Element mit JavaScript.

Abschluss

JavaScript bietet verschiedene Funktionen und Funktionen, mit denen wir verschiedene Eigenschaften und Attribute eines HTML -Elements ändern können. Alle diese Änderungen an einem HTML -Element werden mit Hilfe des Dokumentobjektmodells (DOM) durchgeführt, da JavaScript mit dem DOM interagiert, um die Eigenschaften eines Elements zu ändern. Heute haben wir in diesem Beitrag gelernt, wie wir JavaScript verwenden und einen Hinweis auf ein Element und dann mit Hilfe dieser Referenz erhalten können, wie wir das Styling dieses Elements, die Klasse des Elements und wie wir die verändern können Attribute des Elements. Zusammen mit diesen Änderungen haben wir sogar gelernt, wie wir einem HTML -Element ein neues Attribut unserer Wahl hinzufügen können.