我需要获取:after 并将其分配给变量。有可能吗？
querySelectorAll 不起作用。
alert(some_div_with_pseudo.querySelectorAll('::after')[0]) // undefined
【问题讨论】：
content;请参阅下面的 write-mode 示例我的答案。
标签： javascript html pseudo-element
在 JavaScript 中有一种方法可以在没有任何库的情况下访问伪元素的值。要获取值，您需要使用“getComputedStyle”函数。第二个参数是可选的。
let elem = window.getComputedStyle(parent, ':before');
alert(elem.getPropertyValue('background'))
这会提醒伪元素的值。
【讨论】：
简短的回答是你不能。它还没有。
JavaScript 可以访问 DOM，它是在页面从 HTML 加载时构建的，并在 JavaScript 操作时进一步修改。
伪元素是由 CSS 而不是 HTML 或 JavaScript 生成的。它纯粹是为了给 CSS 一些东西来坚持，但这一切都是在 JavaScript 没有任何想法的情况下发生的。
这是应该的。在整体方案中，页面以 HTML 开始。 JavaScript 一方面可以用来修改其行为和操作内容，而 CSS 可以用来控制结果的呈现：
HTML [→ JavaScript] → CSS → Result
您会看到带有伪元素的 CSS 出现在最后，因此 JavaScript 无法查看。
另见：
编辑
似乎在现代 JavaScript 中有一种使用 window.getComputedStyle(element,pseudoElement) 的解决方法：
var element = document.querySelector(' … ');
var styles = window.getComputedStyle(element,':after')
var content = styles['content'];
【讨论】：
我使用一个箭头指向内容和侧边栏将通过 CSS 伪元素切换到/切换的方向。下面的代码实际上是一个 write 模式，但是也完全可以读取 CSS 伪元素 content。
由于涉及到一些问题，我还将发布先决条件（来源：JAB Creations 网络平台 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');
}
}
【讨论】：
你应该这样做：
window.getComputedStyle(
document.querySelector('somedivId'), ':after'
);
【讨论】：