如何使用 JavaScript 获取 DOM 元素的 ::before 内容？

Posted 2023-02-21

【中文标题】如何使用 JavaScript 获取 DOM 元素的 ::before 内容？

【英文标题】：How to get a DOM element's ::before content with JavaScript?

【发布时间】：2017-11-04 15:22:19

【问题描述】：

我想知道是否可以获取一个DOM元素的::before内容，这是由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;

是这样的：

【问题讨论】：

这个问题怎么没有更多的票？？？

getComputedStyle(links[0], '::after').getPropertyValue('content');

【参考方案1】：

将":before"作为第二个参数传递给window.getComputedStyle()：

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

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

<p>Lorem Ipsum</p>

【参考方案2】：

getComputedStyle() & getPropertyValue()

getComputedStyle(document.querySelector('span.search-box'), '::after').getPropertyValue('content');