Today's Question:  What weekend projects have you created?        GIVE A SHOUT

Technical Article => Web =>  JavaScript

You can get properties of pseudo-element using JavaScript now

  sonic0002      2014-04-05 20:58:25      5,642    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'

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().


Share on Facebook  Share on Twitter  Share on Google+  Share on Weibo  Share on Reddit  Share on Digg  Share on Tumblr 



No comment for this article.


Error appears everywhere

By sonic0002