Wie kann ich „querySelectorAll' verwenden, um den Stil mehrerer Elemente in JavaScript zu ändern?

Ändern des Stils mehrerer Elemente mit querySelectorAll

Wenn Sie den Stil mehrerer Elemente ändern müssen, ist dies eine praktikable Methode, die es zu erkunden gilt Verwenden der querySelectorAll-Methode in JavaScript. Diese Methode ermöglicht die Auswahl mehrerer Elemente basierend auf einem bestimmten Selektor, beispielsweise einem Klassennamen.

Um die Verwendung zu veranschaulichen, stellen Sie sich das folgende Szenario vor: Sie haben eine Funktion namens „changeOpacity“, die derzeit die Deckkraft von a ändert einzelnes Element, wenn es ausgelöst wird. Sie möchten diese Funktionalität jedoch erweitern, um die Deckkraftänderung auf mehrere Elemente gleichzeitig anzuwenden.

Mit querySelectorAll können Sie alle Elemente auswählen, die einen gemeinsamen Klassennamen haben. Mit dieser Auswahl können Sie jedes Element durchlaufen und die gewünschten Stiländerungen anwenden – in diesem Fall die Deckkraft und den Übergang anpassen.

Hier ist eine aktualisierte Version der Funktion „changeOpacity“, die querySelectorAll enthält:

<code class="js">function changeOpacity(className) {
    var elems = document.querySelectorAll(className);
    var index = 0, length = elems.length;
    for (; index < length; index++) {
        elems[index].style.transition = "opacity 0.5s linear 0s";
        elems[index].style.opacity = 0.5;
    }
}</code>

Indem Sie den Klassennamen als Argument an die Funktion „changeOpacity“ übergeben, können Sie die Deckkraftänderung jetzt auf mehrere Elemente mit diesem Klassennamen anwenden.

Das obige ist der detaillierte Inhalt vonWie kann ich „querySelectorAll' verwenden, um den Stil mehrerer Elemente in JavaScript zu ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!