Change class after 3s via javascript

Asked

Viewed 556 times

0

I need to change the class of some elements after 3 seconds starting to load the site, I want to do this but I can’t, I was trying with SetTimeoutbut I can’t manipulate the question of seconds and I couldn’t find a solution via Google. I want the site loads with the div in class .oculto and after 3 seconds she goes to class .visivel Does anyone know of any solution, please?

Follow Example: HTML

<div class="oculto"></div>

CSS

.oculto{opacity:"0"}
.visivel{opacity:"1";width:100%;height:10%;background-color:#cccccc;}
javascript css

3 answers

4


The syntax for this would be like this:

setTimeout(function(){
    document.querySelector('.oculto').classList.add('visivel');
}, 3 * 1000);

As Javascript works in milliseconds you have to pass 3000 ms to setTimeout. Notice that I wrote setTimeout with the first small "s".

If you have several elements you can do so:

var ocultos = document.querySelectorAll('.oculto');
for (var i = 0; i < ocultos.length; i++){
    ocultos[i].classList.add('visivel');
}

  • It worked but in only 1 element, I applied in 1 div and 2 img and only in the div this working, the other item the class is still hidden.

  • It didn’t work on several elements, only on one, the solution was to create more classes like occult 1 Occult 2 Occult 3 and create tbm 3 setTimeout changing to the visible class, I don’t know if it would be the right one, but it worked. Thank you @

  • @Claytonfurlanetto uses the same class for everyone. I added this variant to the answer.

  • didn’t work out this doing the opposite in 3s this disappearing all item with class .oculto I did it that way, it’s right? setTimeout(function(){&#xA; var ocultos = document.querySelectorAll('.oculto');&#xA;for (var i = 0; i < ocultos.length; i++){&#xA; ocultos[i].classList.add('.visivel');&#xA;};&#xA;},4 * 1000);

  • @Exact Claytonfurlanetto. The code I put in was to put inside the setTimeout as you did.

  • It didn’t really work out, but otherwise it worked, so I’ll leave it at that msm. vlw.

Show 1 more comment

1

has the function called Sleep(), where you pass the time parameter, in milliseconds

  • 1

    What is this function sleep()?

  • It’s a waiting function

  • This is php function, it is not?

  • I think the answer in the current format would fit more as a comment, it would be interesting to put example of use

  • @gabrielfalieri From what I researched it seems interesting this function, but I could not apply in my case, I’m starting in js yet, I will test the other answers, but thank you, this function is very interesting I will delve more into it.

  • I think the setTimeOut would be easier for you to apply, starting

  • Tbm I think, I’m testing the @Rgio response I believe will work, thank you.

Show 2 more comments

0

Very simple:

setTimeout(function(){ 

(document.getElementsByTagName('div')[0]).classList.remove("oculto");
(document.getElementsByTagName('div')[0]).classList.add("visivel");


 },3000)

As the setTimeout count is in milliseconds 3,000 to 3 seconds are required

  • In this case it would only work with correct div s? If it were an img, it would no longer work.

  • Well, then I used a basic selector, could pick by id, class, tag name, would be indifferent the important is the selected element

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.