Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung, wie JavaScript Elementattribute, Stile und Klassennamen verwaltet

Detaillierte Erläuterung, wie JavaScript Elementattribute, Stile und Klassennamen verwaltet

藏色散人
藏色散人nach vorne
2022-08-06 10:07:331914Durchsuche

DOM – Document Object Model

Ein vollständiger Satz von Attributen und Methoden für den Betrieb des Dokumentenflusses

  • Operationsseiten-Tags (Elemente)
    Hinzufügen, Löschen, Ändern und Überprüfen von Operations-Tags
    Operations-Tag-Attribute (ID, Klasse, Typ, …)
    Manipulieren Sie den Stil von Tags

  • Lernen Sie einige Inhalte kennen
    -Dokument: Dokumentfluss, Seite, Stammknoten, aber kein Element (Tag)
    -HTML: das größte Element, das alle Tags trägt, Wurzelelementknoten
    -head: trägt speziell das Beschreibungs-Tag der aktuellen Seite, der Inhalt wird hier im Allgemeinen nicht auf der Seite angezeigt
    -body: trägt speziell das Anzeige-Tag der aktuellen Seite, den Inhalt, der wird tatsächlich auf der Webseite angezeigt

Holen Sie sich das Element

Verwenden Sie eine Variable, um ein oder mehrere Elemente auf der Seite zu speichern
Die Methoden zum Abrufen von Elementen sind in zwei Kategorien unterteilt
1. Holen Sie sich unkonventionelle Elemente

  • html: Dokument .documentElement
  • head: document.head
  • body: document id auf der Seite, dann ist es dieses Element, wenn nicht, ist es null

Gemäß Get elements by class name
    Syntax: document.getElementsByClassName('Element class name')
  • Rückgabewert:

    muss ein Pseudo sein array

    Wenn es auf der Seite Elemente gibt, die dem Klassennamen entsprechen, holen Sie sich so viele wie möglich und fügen Sie sie in das Pseudo-Array ein. Rückgabe

    Wenn auf der Seite kein Element vorhanden ist, das dem Klassennamen entspricht, ist es leer Pseudo-Array

  • Elemente basierend auf dem Tag-Namen abrufen
    Syntax: document.getElementsByTagName('Tag-Name') Rückgabewert: Muss ein Pseudo-Array sein

    Wenn es Elemente gibt, die dem Tag-Namen auf der Seite entsprechen, Holen Sie sich dann so viele wie vorhanden, fügen Sie sie in ein Pseudo-Array ein und geben Sie sie zurück.

    Wenn auf der Seite keine Elemente vorhanden sind, die dem Tag-Namen entsprechen, handelt es sich um ein leeres Pseudo-Array.

  • Holen Sie es entsprechend dem Selektor A label
    Syntax: document.querySelector('selector') Rückgabewert: Wenn auf der Seite ein dem Selektor entsprechendes Element vorhanden ist, wird das erste dem Selektor entsprechende Element zurückgegeben. Wenn kein dem Selektor entsprechendes Element vorhanden ist die Seite, dann ist sie null

  • Erhalten Sie einen Satz von Tags basierend auf dem Selektor
  • Syntax: document.querySelectorAll('selector')

    Rückgabewert:
    muss ein Pseudo-Array sein

    Wenn es Elemente gibt, die dem entsprechen Selektor auf der Seite, wie viele werden erhalten? Wie viel, geben Sie ein Pseudo-Array ein und geben Sie zurück

    Wenn auf der Seite kein Element vorhanden ist, das dem Selektor entspricht, handelt es sich um ein leeres Pseudo-Array

  • Manipulierte Elementstile

    Es gibt drei Möglichkeiten, Elementstile in JS zu manipulieren
    1. Inline-Stil des Elements abrufen (nur Inline-Stil kann abgerufen werden)

    2. Nicht-Inline-Stil des Elements abrufen (einschließlich Inline und Nicht-Inline)
  • 3. Stil des Elements festlegen (Nur Inline-Stil kann festgelegt werden)
Hinweis: beinhaltet Unterstreichung. Wenn der Stilname

in Kamel-Schreibweise umgewandelt wird

, verwenden Sie die Array-Assoziationssyntax

  • , um den Inline-Stil des Elements zu erhalten
    Syntax: element.style.style name


    console.log(ele.style.width)
    console.log(ele.style.height) // 非行内样式
    console.log(ele.style.fontSize)
    console.log(ele.style['font-size'])

    ·Erhalten Sie den Nicht-Inline-Stil des Elements.
  • Syntax: window. getComputedStyle (Element zum Abrufen des Stils).Stilname .style.Stilname = Stilwert
  • console.log(window.getComputedStyle(ele).width)
    console.log(window.getComputedStyle(ele).height)
    console.log(window.getComputedStyle(ele).fontSize)
    console.log(window.getComputedStyle(ele)['background-color'])

    Name der Operationselementklasse

  • Zweck: Stile stapelweise ändern

  • Klassenname
  • Betrieb nativer Attribute
Weil es in JS einen Schlüssel namens Klasse gibt, um eine Umbenennung zu vermeiden Es heißt className
    Hinweis: Der Wert des Klassennamens ist eine Zeichenfolge, die Zeichenfolge kann jedoch mehrere enthalten. Jeder Klassenname

classList

Jeder Elementknoten hat ein eigenes Attribut namens classList

Es handelt sich um eine ähnliche Datenstruktur zu einer Gruppe, die alle Klassennamen des Elements speichert. Hinzufügung, Löschung, Änderung und Abfrage sind alle Vorgänge auf classList. Geben Sie eine dedizierte API. Hinzufügen: element.classList.add(Klassenname)

Löschen: element.classList. entfernen(Klassenname)

Schalter: element.classList.toggle(Klassenname)
    – Löschen, wenn es ursprünglich vorhanden ist, wenn es vorher nicht vorhanden ist. Einfach hinzufügen


  • Verwandte Empfehlungen: [
    JavaScript-Video-Tutorial

    ]

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung, wie JavaScript Elementattribute, Stile und Klassennamen verwaltet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:csdn.net. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen