web-dev-qa-db-fra.com

Comment obtenir un pseudo-élément?

J'ai besoin d'avoir :after et l'affecter à la variable. C'est possible?

querySelectorAll ne fonctionne pas.

alert(some_div_with_pseudo.querySelectorAll('::after')[0]) // undefined
javascripthtmlpseudo-element
26
A. Petrov

La réponse courte est que vous ne pouvez pas. Ce n’est pas encore là.

JavaScript a accès au DOM, qui est créé lorsque la page est chargée à partir de HTML et modifié davantage lorsque JavaScript le manipule.

Un pseudo-élément est généré par CSS, plutôt que HTML ou JavaScript. Il est là uniquement pour donner quelque chose à CSS, mais tout se passe sans que JavaScript en ait la moindre idée.

Ça devrait être comme cela. Dans le schéma général des choses, les pages commencent au format HTML. JavaScript peut être utilisé pour modifier son comportement et pour manipuler le contenu d'une part, et CSS peut être utilisé pour contrôler la présentation du résultat:

HTML [→ JavaScript] → CSS → Result

Vous verrez que CSS, complet avec des pseudo-éléments, vient à la fin, donc JavaScript n'est pas visible.

Voir également:

13
Manngo

Vous devriez faire quelque chose comme ça:

window.getComputedStyle(
    document.querySelector('somedivId'), ':after'
);

Échantillon ici: https://jsfiddle.net/cfwmqbvn/

4
Didier Aupest

J'utilise une flèche pointant dans la direction où le contenu et la barre latérale basculeront vers/depuis via un pseudo-élément CSS. Le code ci-dessous est en fait un mode d'écriture mais il est tout à fait possible de lire également le pseudo-élément CSS content.

Puisqu'il y a un peu d'implication, je posterai également les prérequis (source: documentation JavaScript de la plateforme web JAB Creations, si quelque chose manque, regardez-le) afin que ceux qui souhaitent l'essayer puissent le faire assez rapidement.

CSS 

#menu a[href*='sidebar']::after {content: '\2192' !important;}

tilisation JavaScript

css_rule_set('#menu a[href*="sidebar"]::after','content','"\u2192"','important');

Prérequis JavaScript

var sidebar = 20;


function id_(id)
{
 return (document.getElementById(id)) ? document.getElementById(id) : false;
}


function css_rule_set(selector,property,value,important)
{
 try
 {
  for (var i = 0; i<document.styleSheets.length; i++)
  {
   var ss = document.styleSheets[i];
   var r = ss.cssRules ? ss.cssRules : ss.rules;

   for (var j = 0; j<r.length; j++)
   {
    if (r[j].selectorText && r[j].selectorText==selector)
    {
     if (typeof important=='undefined') {r[j].style.setProperty(property,value);}
     else {r[j].style.setProperty(property,value,'important');}
     break;
    }
   }
  }
 }
 catch(e) {if (e.name !== 'SecurityError') {console.log('Developer: '+e);}}
}


function sidebar_toggle()
{
 if (id_('menu_mobile')) {id_('menu_mobile').checked = false;}

 if (getComputedStyle(id_('side')).getPropertyValue('display') == 'none')
 {
  css_rule_set('#menu a[href*="sidebar"]::after','content','"\u2192"','important');

  if (is_mobile())
  {
   css_rule_set('main','display','none','important');
   css_rule_set('#side','width','100%','important');
   css_rule_set('#side','display','block','important');
  }
  else
  {
   css_rule_set('main','width',(100 - sidebar)+'%');
   css_rule_set('#side','display','block');
  }
 }
 else
 {
  css_rule_set('#menu a[href*="sidebar"]::after','content','"\u2190"','important');

  if (is_mobile())
  {
   css_rule_set('main','display','block','important');
   css_rule_set('main','width','100%','important');
   css_rule_set('#side','display','none','important');
  }
  else
  {
   css_rule_set('main','width','100%','important');
   css_rule_set('#side','display','none');
  }
 }
1
John