如何获得伪元素？

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不会出现。

也可以看看：

• https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector#Usage_notes
• https://www.w3.org/TR/selectors-api/#grammar

Answer 2

您应该执行以下操作：

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

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

Answer 3

我使用一个箭头指向内容和侧边栏将通过 CSS 伪元素切换的方向。下面的代码实际上是一种写​​入模式，但是也完全可以读取 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

更改或设置CSS伪元素的样式是一个棘手的问题，实际上，你不能直接这样做，或者也许我还不知道方法，但我将与你分享一种技巧来做到这一点。

-使用CSS变量来设计CSS伪元素并使用javascript更改变量的值，这将改变CSS伪元素的样式。

CSS：

 #box::after{
 content: 'this is after';
 background-color: var(--boxAfterBackColor,red);
 position: absolute;
 top: -20px;
 right: 0px;
 font-size: var(--boxAfterFontSize,20px);
}

JavaScript：

let box = document.getElementById('box');
box.style.setProperty('--boxAfterBackColor','green');
box.style.setProperty('--boxAfterFontSize','50px');

这对我有用，希望对你也有帮助。祝你好运！