How to get a DOM element's ::before content with JavaScript?

扶醉桌前 提交于 2019-12-03 17:00:38

问题


I want to know whether it is possible to get a DOM element's ::before content, which was set by CSS3.

I have tried some ways, but I still can't make it, so it's very confusing to me!

// 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:


回答1:


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>



回答2:


getComputedStyle() & getPropertyValue()

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



来源:https://stackoverflow.com/questions/44342065/how-to-get-a-dom-elements-before-content-with-javascript

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!