Javascript Girl
  1. Javascript Girl
  3. Comment passer css: pseudo-classe active à javascript?
Intereting Posts
Erreur lors de l'appel de la méthode javascript à partir de l'applet Pause Youtube s'embarque lors de la lecture Soundcloud embed Testez-vous si un élément contient une classe? Positionnement d'images dans des endroits aléatoires Réagissez sur les marqueurs Airbnb natifs: les marqueurs disparaissent avec succès, mais ne réapparaissent pas Le but original de <input type = "hidden">? Comment puis-je actualiser une page Web sans que le navigateur demande si je souhaite renvoyer à nouveau Comment formater automatiquement les entrées de la boîte à texte En javascript, quelles sont les meilleures pratiques pour l'exécution de fonctions asynchrones multiples avec rappel? Filtre simple sur le tableau de RXJS Observable Nœud et erreur: EMPLOI, trop de fichiers ouverts Filtrer les éléments hors d'un objet jquery en fonction du contenu du texte Comment remplir une liste déroulante en cascade avec JQuery Comment puis-je désactiver la défense de scripts entre sites sur mon propre navigateur? À quoi signifie le terme objet ?

Comment passer css: pseudo-classe active à javascript?

Référence: Commentaires postés par @AnkithAmtange

Dit html 

<div>Click Away</div>

Css 

 div { width: 200px; height: 200px; background: orange; } div:active { color: white; background: rebeccapurple; }

Jsfiddle https://jsfiddle.net/u3uhq9m1/

Comment passer l'élément DOM actuellement :active pseudo-classe à javascript ?

Premier essai. Notez que jQuery n'est pas une exigence. 

 $(document).ready(function() { var active; $("div").click(function() { active = $(":active"); setTimeout(function() { console.log("active", active) }, 1000) }) })

Https://jsfiddle.net/u3uhq9m1/1/

Vous pouvez utiliser document.activeElement pour cela. 

 $(function() { $(document).on('click', function() { console.log(document.activeElement); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="a">asdf</div> <span>123</span> <select> <option>1</option> </select> <button>123</button> <input />

Vous pouvez utiliser :active:hover pseudo-classe, animation avec duration définie sur 0s , @keyframes à css ; animationend event at javascript 

 :root { --activeprop: 0px; } div { position: relative; left: var(--activeprop); width: 200px; height: 200px; background: orange; } div:active:hover { color: white; background: rebeccapurple; animation: active 0s; -moz-animation: active 0s; -webkit-animation: active 0s; } @keyframes active { from { left:var(--activeprop); } to { left:var(--activeprop); } } @-moz-keyframes active { from { left:var(--activeprop); } to { left:var(--activeprop); } } @-webkit-keyframes active { from { left:var(--activeprop); } to { left:var(--activeprop); } } 
 <div>Click Away</div> <script> for (el of document.querySelectorAll("div")) { el.addEventListener("animationend", function(event) { console.log(`${event.target.nodeName} is :active`) }) }; </script>