Javascript 如何获取伪元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38872290/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get pseudo element?
提问by A. Petrov
I need to get :afterand assign it to variable. It is possible?
我需要获取:after并将其分配给变量。有可能的？
querySelectorAlldoesn't work.
querySelectorAll不起作用。
alert(some_div_with_pseudo.querySelectorAll('::after')[0]) // undefined
回答by Manngo
The short answer is that you can't. It's not there yet.
简短的回答是你不能。它还没有。
JavaScript has access to the DOM, which is built when the page is loaded from HTML, and modified further when JavaScript manipulates it.
JavaScript 可以访问 DOM，DOM 在从 HTML 加载页面时构建，并在 JavaScript 操作时进一步修改。
A pseudo elementis generated by CSS, rather than HTML or JavaScript. It is there purely to give CSS something to hang on to, but it all happens without JavaScript having any idea.
甲伪元件是由CSS产生，而不是HTML或JavaScript。它纯粹是为了给 CSS 一些东西，但是这一切都发生在 JavaScript 没有任何想法的情况下。
This is how it should be. In the overall scheme of things, the pages starts off as HTML. JavaScript can be used to modify its behaviour and to manipulate the content on one hand, and CSS can be used to control the presentation of the result:
这是应该的。在总体方案中，页面以 HTML 开头。一方面可以使用 JavaScript 来修改其行为并操纵内容，而可以使用 CSS 来控制结果的呈现：
HTML [→ JavaScript] → CSS → Result
You'll see that CSS, complete with pseudo elements, comes at the end, so JavaScript doesn't get a look in.
您会看到带有伪元素的 CSS 出现在最后，因此 JavaScript 不会被查看。
See also:
也可以看看：
回答by Didier Aupest
You should dos something like this:
你应该做这样的事情：
window.getComputedStyle(
document.querySelector('somedivId'), ':after'
);
Sample here: https://jsfiddle.net/cfwmqbvn/
回答by John
I use an arrow pointing in the direction that the content and sidebar will toggle to/from via a CSS pseudo-element. The code below is effectively a writemode however it is entirely possible to read CSS pseudo-element contentas well.
我使用一个箭头指向内容和侧边栏将通过 CSS 伪元素来回切换的方向。下面的代码实际上是一种写入模式，但也完全可以读取 CSS 伪元素content。
Since there is a bit involved I'll also post the prerequisites (source: JAB Creations web platform JavaScript documentation, if anything missing look it up there) so those who wish to try it out can fairly quickly do so.
由于涉及到一些内容，我还将发布先决条件（来源：JAB Creations Web 平台 JavaScript 文档，如果缺少任何内容，请在此处查找），以便那些想要尝试的人可以很快地这样做。
CSS
CSS
#menu a[href*='sidebar']::after {content: '92' !important;}
JavaScript Use
JavaScript 使用
css_rule_set('#menu a[href*="sidebar"]::after','content','"\u2192"','important');
JavaScript Prerequisites
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');
}
}
