Wie ändere ich CSS-Klassenstile in JavaScript dynamisch ohne getElementById?

CSS-Klassenstile in JavaScript ohne getElementById ändern

Problem:

So ändern Sie dynamisch die CSS-Stile eines Elements durch Ansprechen auf eine Klasse in JavaScript ohne Verwendung von getElementById?

Antwort:

Während es möglich ist, CSS-Stile mithilfe des styleSheets-Arrays in JavaScript zu ändern Eine effizientere Alternative besteht darin, separate Stile mit den gewünschten Anzeigeeinstellungen zu erstellen.

Erstellen Sie beispielsweise ein Stylesheet mit der folgenden Regel:

.hidden {
  display: none;
}

Um diesen Stil auf ein Element anzuwenden , verwenden Sie die Methode „remove()“:

const element = document.querySelector(".hidden");
element.classList.remove("hidden");

Dadurch werden die ausgeblendete Klasse und ihre Stilregeln entfernt und das Element sichtbar gemacht.

Zusätzlicher Hinweis:

Es ist wichtig zu beachten, dass dieser Ansatz neue Stilregeln im DOM erstellt. Sie bietet zwar mehr Flexibilität und Kontrolle über den Stil, eine übermäßige Verwendung dieser Methode kann jedoch die Speichernutzung des Dokuments aufblähen.

Das obige ist der detaillierte Inhalt vonWie ändere ich CSS-Klassenstile in JavaScript dynamisch ohne getElementById?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!