Today's Question:  What does your personal desk look like?        GIVE A SHOUT

You can get properties of pseudo-element using JavaScript now

  sonic0002        2014-04-05 20:58:25       8,328        0    

The pseudo-element6 in CSS is extremely useful, you can use it to create CSS triangles and lots of other elements without overuse many HTML elements. In the past, you cannot get the property value of pseudo-element in CSS using JavaScript. Now you can call a new method in JavaScript to get them easily.

Assume you have below CSS codes:

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

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

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

You can put the pseudo-element as the second parameter to the window.getComputedStyle() method. Then you will be able to access he properties of all its attributes.

But the pseudo-element parameter to window.getComputedStyle() is not supported by Opera and for IE versions before IE 11 doesn't support this one as well. Other major browsers include Chrome,Firefox and Safari all support the use of pseudo-element in window.getComputedStyle().

JAVASCRIPT  PROPERTY  PSEUDO-ELEMENT 

Share on Facebook  Share on Twitter  Share on Weibo  Share on Reddit 

  RELATED


  0 COMMENT


No comment for this article.