Как получить псевдоэлемент?

Мне нужно получить :after и присвоить его переменной. Это возможно?

querySelectorAll не работает.

alert(some_div_with_pseudo.querySelectorAll('::after')[0]) // undefined

Ответ 1

Короткий ответ: ты не можешь. Его еще нет.

У JavaScript есть доступ к DOM, который создается, когда страница загружается из HTML, и изменяется, когда JavaScript манипулирует им.

Псевдоэлемент генерируется CSS, а не HTML или JavaScript. Это просто для того, чтобы дать CSS что-то, за что можно держаться, но все это происходит без JavaScript.

Так и должно быть. В общей схеме страницы начинаются как HTML. JavaScript может использоваться для изменения его поведения и управления контентом с одной стороны, а CSS может использоваться для управления представлением результата:

HTML [→ JavaScript] → CSS → Result

Вы увидите, что CSS, в комплекте с псевдоэлементами, подходит к концу, поэтому JavaScript не заглядывает.

Смотрите также:

Ответ 2

Предположим, что ваш CSS выглядит так:

.element:after {
    content: 'NEW';
    color: rgb(255, 0, 0);
}

Чтобы получить свойство цвета элемента. before, вы можете использовать следующий JavaScript:

var color = window.getComputedStyle(
    document.querySelector('.element'), ':after'
).getPropertyValue('color')

var color = window.getComputedStyle(
	document.querySelector('.element'), ':after'
).getPropertyValue('color');
alert(color);

.element:after {
	content: 'NEW';
	color: rgb(255, 0, 0);
}

<div class="element"></div>

Ответ 3

Вы должны использовать что-то вроде этого:

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

Пример здесь: https://jsfiddle.net/cfwmqbvn/

Ответ 4

Я использую стрелку, указывающую направление, в котором контент и боковая панель будут переключаться в/из псевдоэлемента CSS. Приведенный ниже код фактически является режимом записи, однако также вполне возможно читать content псевдоэлемента CSS.

Поскольку это немного связано, я также опубликую предварительные условия (источник: документация JavaScript веб-платформы JAB Creations, если что-то отсутствует, посмотрите там), так что те, кто хочет попробовать это, могут довольно быстро сделать это.

CSS

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

Использование JavaScript

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

Предварительные условия 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');
  }
 }