how could I change the opacity of a div?

Question

I am new in javascript and I am trying to change the opacity of a div and I don't know how to do it, and I didn't find anything online.
here is my 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>

document.getElementsByClassName("modificar_imagen")[0].style.opacity="0"; — Joe Warner, May 12 '18 at 15:23

Randy Casburn · Answer 1 · 2018-05-12T15:26:58.067

1

document.getElementsByClassName("modificar_imagen") retrieves a HTMLCollection. It would be better to use document.querySelectorAll() so that you can use the forEach() method to iterate over the image collection:

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

That should do it.

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>

edited May 12 '18 at 15:26

answered May 12 '18 at 15:23

Randy Casburn

13,840
1
16
31

Would using a getElementbyId() return a single element? – pastaleg May 12 '18 at 15:26
@Magnus - it would, but there are no ids on the images. It is much better to use the more modern `.querySelector()` and `.querySelectorAll()` methods. Then one simply uses CSS selectors to choose one or more elements. – Randy Casburn May 12 '18 at 15:28
@RitwickDey - fixed. Thanks. – Randy Casburn May 12 '18 at 15:28

how could I change the opacity of a div?

1 Answers1