Method tip for getting the pseudo element of Pseudo Element attribute by JavaScript

  • 2020-05-16 06:16:50
  • OfStack

The CSS pseudo-element (pseudo-elements) is very useful - you can use it to make CSS3 angles, use it in the prompt box, and do many simple tasks without the need for extra HTML elements. Previously, the CSS attributes of pseudo-elements could not be obtained with JavaScript, but now there is a new JavaScript method to access them! Suppose your CSS code looks like this:


.element:before {
 content: 'NEW';
 color: rgb(255, 0, 0);
}

To get the style properties in.element :before, you can use the JavaScript code below:

var color = window.getComputedStyle(
 document.querySelector('.element'), ':before'
).getPropertyValue('color')

Take the pseudo-element as the second parameter of the window.getComputedStyle method, and you can get the attributes in the pseudo-element style! Put this technique into your library, and as browsers evolve, pseudo-elements will become more and more useful!


Related articles: