Home > Web Front-end > CSS Tutorial > How to Change the Opacity of Multiple DIV Elements with querySelectorAll?

How to Change the Opacity of Multiple DIV Elements with querySelectorAll?

DDD
Release: 2024-11-01 03:46:01
Original
703 people have browsed it

How to Change the Opacity of Multiple DIV Elements with querySelectorAll?

Using querySelectorAll to Modify Multiple Elements' Appearance

In the world of web development, it's often necessary to manipulate the style of multiple elements simultaneously. In this scenario, a JavaScript function exists to adjust the opacity of a specific DIV element. However, the challenge lies in applying this function to several DIVs at once.

Using getElementsByClassName initially seems like a viable approach, but it falls short in our case. Instead, querySelectorAll emerges as a more appropriate solution. Here's how the function can be implemented:

<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>
Copy after login

In this code, querySelectorAll retrieves a collection of all DIVs containing a specific class name. A for loop iterates over this collection, applying the desired style changes to each element.

As an alternative suggestion, consider using CSS classes to define styling values for multiple elements. This approach becomes useful when styling values are not dynamic. The code above can be modified to:

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

By adding a CSS class that defines the desired opacity and transition values, the function can be simplified.

The above is the detailed content of How to Change the Opacity of Multiple DIV Elements with querySelectorAll?. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template