Change class after 3s via javascript

Question

Change class after 3s via javascript

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (0 votes)

0

I need to change the class of some elements after 3 seconds that start loading the site, I want to do this but I can not, I was trying to SetTimeout but I can not handle the seconds issue and I did not find a solution via Google. I want the site to load with the div in the .oculto class and after 3 seconds it goes to the .visivel Anyone know of any solutions, please?

Follow Example: HTML

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

CSS

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

javascript css

asked by anonymous 10.10.2017 / 16:13

3 answers

1

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

10.10.2017 / 16:15

0

Pretty 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, it takes 3,000 to 3 seconds

10.10.2017 / 16:17

Import Python DLL in C ++ Trimming html and css table layout

score 3 · Accepted Answer

The syntax for this would look 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 multiple elements you can do this:

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