如何获取一个DOM元素的::之前的内容与javscript？ [英] How to get a DOM element's ::before content with javscript?

问题描述

我尝试了一些方法，但我仍然无法做到！

所以，这很困惑我！

因此，我想知道是否可以获取一个dom元素的 :: before 内容，由css3设置！

  // https://rollbar.com/docs/const links =在Ruby之前的document.querySelectorAll（`ul.image-list a`）; links [0]; //< a href =/ docs / notifier / rollbar-gem /class =ruby>一个> links [0]; // links [0] .textContent; //Rubylinks [0] .innerText; //Rubylinks [0] .innerHTML; //Ruby// ???链接[0] :: before;  

img src =https://i.stack.imgur.com/j4Op4.pngalt =！[enter image description here>

解决方案

通过：之前作为第二个参数 window.getComputedStyle（） ：

< pre class =snippet-code-js lang-js prettyprint-override> console.log（getComputedStyle（document.querySelector（'p'），'：before'）。getPropertyValue（'content' ）;

  p :: before，p :: after {内容：'Test';}  

 < p> Lorem存有< / p为H.  

I had tried some ways, but I still can't make it!
So, it's very confused me!
Therfore, I wanna to know whether it is possible to get a dom element's ::before content, which was set by css3 !

// https://rollbar.com/docs/

const links = document.querySelectorAll(`ul.image-list a`);

links[0];
// <a href="/docs/notifier/rollbar-gem/" class="ruby">::before Ruby</a>

links[0];
//

links[0].textContent;
//"Ruby"

links[0].innerText;
// "Ruby"

links[0].innerHTML;
// "Ruby"

// ??? links[0]::before;

This is the case

解决方案

Pass ":before" as the second parameter to window.getComputedStyle():

console.log(getComputedStyle(document.querySelector('p'), ':before').getPropertyValue('content'));

p::before,
p::after {
  content: ' Test ';
}

<p>Lorem Ipsum</p>

这篇关于如何获取一个DOM元素的::之前的内容与javscript？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！