Maison > interface Web > tutoriel CSS > le corps du texte

Comment puis-je utiliser « querySelectorAll » pour modifier le style de plusieurs éléments en JavaScript ?

DDD
Libérer: 2024-11-02 04:28:30
original
999 Les gens l'ont consulté

 How can I use `querySelectorAll` to modify the styling of multiple elements in JavaScript?

Modification du style de plusieurs éléments avec querySelectorAll

Face à la nécessité de modifier le style de plusieurs éléments, une méthode viable à explorer est en utilisant la méthode querySelectorAll en JavaScript. Cette méthode permet la sélection de plusieurs éléments en fonction d'un sélecteur donné, comme un nom de classe.

Pour illustrer son utilisation, considérons le scénario suivant : vous disposez d'une fonction appelée changeOpacity qui modifie actuellement l'opacité d'un élément unique lorsqu'il est déclenché. Cependant, vous souhaitez étendre cette fonctionnalité pour appliquer le changement d'opacité à plusieurs éléments simultanément.

En utilisant querySelectorAll, vous pouvez sélectionner tous les éléments qui partagent un nom de classe commun. Une fois cette sélection obtenue, vous pouvez parcourir chaque élément et appliquer les modifications de style souhaitées, dans ce cas, en ajustant l'opacité et la transition.

Voici une version mise à jour de la fonction changeOpacity qui intègre querySelectorAll :

<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>
Copier après la connexion

En passant le nom de la classe comme argument à la fonction changeOpacity, vous pouvez désormais appliquer la modification d'opacité à plusieurs éléments portant ce nom de classe.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal