Arbeiten mit Attributen für DOM -Elemente

Das Manipulieren von Dom -Element -Attributen kann schwierig sein. In diesem Artikel werden verschiedene Methoden zum Festlegen und Abrufen von Attributwerten in JavaScript untersucht, vorausgesetzt, el ist ein DOM -Element (z. B. über document.querySelector erhalten. QuerySelector).

Einige Attribute sind direkt als Eigenschaften des DOM -Objekts zugänglich. Zum Beispiel können id , title , lang , align und Ereignisattribute wie onclick einfach festgelegt und abgerufen werden:

 el.id; // "Cool"
El.Title = "Mein Titel";
El.Title; // "mein Titel";

Das style ist ähnlich, aber seine Eigenschaften sind verschachtelt:

 El.Style.color = "Red";
El.Style.BackgroundColor = "Black";

Verwenden Sie window.getComputedStyle :, um berechnete Stile zu erhalten (und nicht nur die Inline -Stile):

 let style = window.getComputedStyle (EL);
style.color; // berechnete CSS -Farbe

Allerdings sind nicht alle Attribute erstklassige Bürger. Für Attribute wie aria-hidden müssen Sie setAttribute und getAttribute verwenden:

 El.Setattribute ("aria-versteckt", wahr);
El.GetAttribute ("Aria-Hidden");

Bestimmte Attribute bieten spezialisierte Helfer -APIs. classList bietet bequeme Methoden zum Verwalten von Klassenattributen:

 EL.ClASSLIST.VALUE; // "Modul groß"
el.classList.length; // 2
el.classList.add ("cool"); // "Modul Big Cool"
el.classList.remove ("big"); // "Modul cool"
el.classList.toggle ("big"); // Umschalten "groß"
EL.ClASSList.Contains ("Modul"); // WAHR

classList verhält sich sogar Array-ähnlich und ermöglicht Methoden wie forEach .

Für data-* bietet die dataset -Eigenschaft eine benutzerfreundlichere Schnittstelle:

 El.Dataset;
/*
{
  aktiv: "wahr",
  Platzierung: "Oben rechts"
}
*/

El.Dataset.Active; // "WAHR"
El.Dataset.extrawords; // "Hi" (Note Camelcase Conversion)
el.dataset.active = "false"; // Setter

Dieser Überblick zeigt die verschiedenen Möglichkeiten, mit DOM -Attributen zu interagieren, und zeigt die Bedeutung des Verständnisses der Nuancen jedes Ansatzes für eine effiziente und korrekte Manipulation.

Das obige ist der detaillierte Inhalt vonArbeiten mit Attributen für DOM -Elemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!