Is there a way to adjust the transparency of a div element?

Question

Is there a way to adjust the transparency of a div element?

Hey there, I'm relatively new to JavaScript and I've been trying to figure out how to change the opacity of a div element. Unfortunately, my searches online haven't turned up anything helpful.
Here's what I have in terms of code so far:
JavaScript

function close_images(){
    document.getElementsByClassName("modificar_imagen").style.opacity="0";
}

HTML

<div class="modificar_imagen">
        <div class="close1" onclick="close_images()"><img src="img/icons/close.png" alt="close"></div>
            <div class="contenido">
                <div class="grid">
                        <div  class="image_user"><img src="img/user1.jpg"></div>
                        <div  class="image_user"><img src="img/user1.jpg"></div>


                </div>
            </div>
    </div>

javascript html css

Answer 1

Answer №1

document.getElementsByClassName("modificar_imagen")

retrieves a HTMLCollection. To improve this, consider using document.querySelectorAll() instead. This way, you can utilize the forEach() method to loop through the image collection:

    document.querySelectorAll(".modificar_imagen").forEach(el=>el.style.opacity="0");

This approach should work better.

function close_images(){
    document.querySelectorAll(".modificar_imagen").forEach(el=>el.style.opacity="0");
}

close_images()

<div class="modificar_imagen">
        <div class="close1" onclick="close_images()"><img src="img/icons/close.png" alt="close"></div>
            <div class="contenido">
                <div class="grid">
                        <div  class="image_user"><img src="img/user1.jpg"></div>
                        <div  class="image_user"><img src="img/user1.jpg"></div>


                </div>
            </div>
    </div>

Answer 2

document.getElementsByClassName("modificar_imagen")

retrieves a HTMLCollection. To improve this, consider using document.querySelectorAll() instead. This way, you can utilize the forEach() method to loop through the image collection:

    document.querySelectorAll(".modificar_imagen").forEach(el=>el.style.opacity="0");

This approach should work better.

function close_images(){
    document.querySelectorAll(".modificar_imagen").forEach(el=>el.style.opacity="0");
}

close_images()

<div class="modificar_imagen">
        <div class="close1" onclick="close_images()"><img src="img/icons/close.png" alt="close"></div>
            <div class="contenido">
                <div class="grid">
                        <div  class="image_user"><img src="img/user1.jpg"></div>
                        <div  class="image_user"><img src="img/user1.jpg"></div>


                </div>
            </div>
    </div>

Is there a way to adjust the transparency of a div element?

Answer №1

Similar questions

What is preventing me from using jQuery to dynamically insert HTML onto the page?

Tips on deactivating a button after it has been clicked once within a 24-hour period and reactivating it the following day with the use of JavaScript and Angular

Troubining CSS nth-of-type or child selectors with custom elements within additional custom elements may cause unexpected behavior

Importing modules in Node can be done after the code has been executed, or through ESM Dynamic

When hovering over the label area, the entire rectangle will be highlighted

The best practices for utilizing getStaticProps with Firebase

Rails application's generated link with jQuery is directing to localhost inaccurately

Prevent textArea from reducing empty spaces

The optimal and most secure location for storing and retrieving user access credentials

"Convert a date string to a date object using the verbose moment date

Excessive width of Bootstrap container

Converting a query string to an array and then transforming it into a string

Modify the cssclass of a button within a datalist by utilizing JQuery in an ASP.NET environment

iOS is not receiving JSON data in the response headers

Selecting multiple categories using jQuery

When using Mongoose paginate, there is always one missing document

Set border-image to have rounded corners

Is it possible to animate share buttons using Framer Motion but staggering siblings?

Retrieve the ID from either a search query or an insertion operation in MongoDB

What is the process for setting up a vertical carousel in Bootstrap 5 with a stationary previous image?