0
votes

Comment changer l'affichage CSS de visible à non visible après un certain temps en utilisant javascript

Je veux définir une propriété d'affichage css d'objets DOM sur «bloquer» pendant 2 secondes, puis la remettre sur «aucun» après les 2 secondes. Comment cela peut-il être fait en javascript? Je suis vraiment nouveau dans ce domaine, alors n'obtenez pas vraiment jquery pour le moment.

J'ai essayé

document.querySelector(".one-rolled-popup").style.display = "none";

puis définissez-le sur

document.querySelector(".one-rolled-popup").style.display = "block";

javascript html css function display

0 commentaires

3 Réponses :

2
votes

utilisez setTimeout . Il exécutera une méthode après X millisecondes. Dans votre cas, vous afficherez le bloc, puis le remettrez à zéro après 2 secondes.

method () {
  // display it
  document.querySelector(".one-rolled-popup").style.display = "block";

  // hide it after 2 seconds
  setTimeout(() => {
      document.querySelector(".one-rolled-popup").style.display = "none",
  2000);
}

4 commentaires

() => {// code} est un raccourci pour function () {// code} qui a été introduit dans la spécification JavaScript ES6. Il est utilisé pour résoudre un problème classique d'où la portée «this». Mais comme cela n'a pas d'importance ici, vous pouvez utiliser l'un des deux. @PumpkinBreath

@PumpkinBreath vérifier ceci

très appréciée

@PumpkinBreath heureux d'aider :)

1
votes

Vous pouvez effectuer les opérations suivantes en utilisant setTimeout . Je suppose que par défaut le div est visible donc je n'ai pas à le montrer.

<div class="one-rolled-popup">Testing</div>

.one-rolled-popup {
  display: none;
}

Mais s'il est masqué par défaut, vous pouvez le faire à la place (cliquez sur l'écran dans l'extrait de code pour voir l'effet):

function showAndHide() {
  document.querySelector(".one-rolled-popup").style.display = "block";
  setTimeout(
    function() {
      document.querySelector(".one-rolled-popup").style.display = "none";
    }, 2000);
}



window.onclick = function() {
  showAndHide();
}

<div class="one-rolled-popup">Testing</div>

setTimeout(
  function() {
    document.querySelector(".one-rolled-popup").style.display = "none";
  }, 2000);

0 commentaires

1
votes

Essayez cette fonction

   setTimeout(function(){ 
   if (document.querySelector(".one-rolled-popup").style.display == "block";) {
      document.querySelector(".one-rolled-popup").style.display= "none";
   } else {
      document.querySelector(".one-rolled-popup").style.display= "none";
   }

  }, 3000);

0 commentaires