Question

我需要获取:after并将其分配给变量。有可能吗？

querySelectorAll不起作用。

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

Answer 1

简短的答案是您不能这样做。还没有呢。

JavaScript可以访问DOM，该DOM是从HTML加载页面时生成的，并在JavaScript操作时进行了进一步修改。

伪元素是由CSS而不是HTML或JavaScript生成的。纯粹是为了给CSS提供帮助，但这一切都是在JavaScript没有任何想法的情况下发生的。

应该是这样。在总体方案中，页面以HTML开头。一方面，JavaScript可用于修改其行为并操纵内容，而CSS可用于控制结果的显示方式：

HTML [→ JavaScript] → CSS → Result

您会发现CSS（最后包含伪元素）位于末尾，因此JavaScript不会引起人们的注意。

另请参阅：

Answer 2

你应该这样做：

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

此处示例：https://jsfiddle.net/cfwmqbvn/

Answer 3

我使用一个箭头，指向内容和侧边栏将通过CSS伪元素来回切换的方向。下面的代码实际上是 write 模式，但是也完全可以读取CSS伪元素content。

由于涉及到一些问题，因此我还将发布先决条件（来源：JAB Creations Web平台JavaScript文档，如果有缺失的话，请在此处查找），以便希望尝试的人可以很快这样做。

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');
  }
 }

Answer 4

JavaScript 中有一种方法可以在没有任何库的情况下访问伪元素的值。要获取该值，您需要使用“getComputedStyle”函数。第二个参数是可选的。

Page 1

这会提醒伪元素的值。

如何获得伪元素？

4 个答案: