Activeer de actieve CSS-pseudo-klasse van een element met Javascript?

Is dit mogelijk?

Als een gebruiker bijvoorbeeld op de "return" -toets drukt en ik de "mousedown" -gebeurtenis start, hoe render ik dan het element met: actieve stijlen?

Ik weet dat het mogelijk is om dit te doen met behulp van klassen, maar ik zou het liefst de reeds bestaande: actieve stijlen gebruiken.

8
@ Casey - Ik denk niet dat dit dezelfde vraag is waarvoor je een link hebt geplaatst. In die link was de vraag in feite hoe je een pseudoclass kon instellen met javascript. Hier lijkt Evan zich af te vragen hoe ervoor te zorgen dat een pseudoclass die al in CSS is ingesteld daadwerkelijk wordt geactiveerd op basis van een javascript-gebeurtenis. Met andere woorden, hij heeft : actieve stijlen vooraf ingesteld, hij triggert gebeurtenissen in javascript, hoe zorgt hij ervoor dat deze gebeurtenissen ertoe leiden dat het item als "actief" wordt beschouwd.
toegevoegd de auteur ScottS, de bron
Deze vraag is vaak gesteld. CSS pseudo class-regels uit javascript"> stackoverflow.com/questions/311052/& hellip;
toegevoegd de auteur Casey Robinson, de bron
Bedankt @ Scott, je hebt gelijk. Ik vraag je of je de stijlen voor een CSS-pseudo-klasse kunt activeren met JavaScript, en niet andersom.
toegevoegd de auteur Evan Sharp, de bron

1 antwoord

Volgens de CSS 2.1-specificatie is de: actieve pseudo-klasse van toepassing terwijl :

een element wordt geactiveerd door de gebruiker. Bijvoorbeeld tussen de   keer drukt de gebruiker op de muisknop en laat hem los.

U moet in staat zijn om een ​​gebeurtenis in de muis te verzenden met het onderwerp als het doel van de gebeurtenis en deze moet actief blijven totdat een overeenkomende gebeurtenis mouseup wordt verzonden. Als het werkt, werkt het waarschijnlijk niet betrouwbaar op genoeg browsers om het bruikbaar te maken.

Het zou veel eenvoudiger (en breder ondersteund) zijn om een ​​geschikte klasse toe te voegen/te verwijderen.

Bewerk

Hier is een voorbeeld van het gebruik van DOMActivate. U kunt zien dat het verzenden van een activeringsgebeurtenis op een element de bijbehorende listener met aanactivering activeert, maar verandert niet het uiterlijk van het element dat wordt geactiveerd.

Misschien kun je actiation simuleren door te luisteren naar de activeergebeurtenis, een klasse toevoegen om het element te markeren en het na een paar ogenblikken te verwijderen met behulp van setTimeout of iets dergelijks.

<script type="text/javascript">
  function Init() {
    var p, ps = document.getElementsByTagName('p');
    var d = document.getElementById('div0');

    if (ps.length && ps[0].addEventListener) {

      for (var i=0, iLen=ps.length; i

  <div id="div0">div
    
para0
para1 <button onclick=" simulateActive('para0'); ">Activate para</button> </div> <button onclick=" simulateActive('para0'); ">Activate para</button> </body>
4
toegevoegd
Er is een UIEvent-interface die heeft een DOMActivate type, maar het lijkt erop dat het bijbehorende UI-gedrag niet wordt geactiveerd. Dus het simpele antwoord is dat het onmogelijk lijkt met script.
toegevoegd de auteur RobG, de bron
Bedankt RobG. Helaas activeert de mousedown-gebeurtenis niet de: actieve stijlen in CSS (alleen getest in WebKit). Het lijkt erop dat er geen eenvoudige manier is om dit te doen. : - /
toegevoegd de auteur Evan Sharp, de bron