Comment modifier l'opacité de plusieurs éléments DIV avec querySelectorAll ?

Utiliser querySelectorAll pour modifier l'apparence de plusieurs éléments

Dans le monde du développement Web, il est souvent nécessaire de manipuler le style de plusieurs éléments simultanément. Dans ce scénario, une fonction JavaScript existe pour ajuster l'opacité d'un élément DIV spécifique. Cependant, le défi réside dans l'application de cette fonction à plusieurs DIV à la fois.

Utiliser getElementsByClassName semble au départ être une approche viable, mais elle ne suffit pas dans notre cas. Au lieu de cela, querySelectorAll apparaît comme une solution plus appropriée. Voici comment la fonction peut être implémentée :

<code class="javascript">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>

Dans ce code, querySelectorAll récupère une collection de tous les DIV contenant un nom de classe spécifique. Une boucle for parcourt cette collection, appliquant les modifications de style souhaitées à chaque élément.

Comme suggestion alternative, envisagez d'utiliser des classes CSS pour définir des valeurs de style pour plusieurs éléments. Cette approche devient utile lorsque les valeurs de style ne sont pas dynamiques. Le code ci-dessus peut être modifié en :

<code class="javascript">elems[index].classList.add('someclass');</code>

En ajoutant une classe CSS qui définit les valeurs d'opacité et de transition souhaitées, la fonction peut être simplifiée.

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!