Home > Web Front-end > JS Tutorial > body text

JavaScript methods and techniques for obtaining pseudo-element (Pseudo-Element) attributes_javascript techniques

WBOY
Release: 2016-05-16 16:09:48
Original
1204 people have browsed it

CSS pseudo-elements are very useful - you can use it to create CSS triangles, use them on tooltips, and you can also use them to complete many simple tasks without the need for extra HTML elements. Previously, CSS properties of pseudo-elements were not accessible with JavaScript, but now, there is a new JavaScript method to access them! Assume your CSS code looks like this:

Copy code The code is as follows:

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

To get the style attributes in .element:before, you can use the following JavaScript code:
Copy code The code is as follows:

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

By using the pseudo-element as the second parameter of the window.getComputedStyle method, you can get the attributes in the pseudo-element style! Put this tip into your knowledge base, and as browsers evolve, pseudo-elements will become more and more useful!
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template