JavaScript gets the properties of a CSS pseudo element

CSS pseudo element is very powerful, it is often used to create CSS triangle hint, use CSS pseudo element can achieve some simple effect but do not need to add extra HTML tag. One thing is that JavaScript cannot get these CSS property values, but now there is a way to get to:

Look at the following CSS code:

CopyText

The code is as follows	Copy Code
. element:before { Content: ' NEW '; Color:rgb (255, 0, 0); }.element:before { Content: ' NEW '; Color:rgb (255, 0, 0); }

To get the color properties of. Element:before, you can use the following code:

The code is as follows	Copy Code
CopyText var color = window.getComputedStyle ( Document.queryselector ('. Element '), ': Before ' ). GetPropertyValue (' color ') var color = window.getComputedStyle ( Document.queryselector ('. Element '), ': Before ' ). GetPropertyValue (' Color ')

You can get its CSS properties by uploading the pseudo element to the window.getComputedStyle method as the second argument

Out. Put this code in the set of your tool functions. This approach can be useful as pseudo elements are supported by more and more browsers.

Translator Note: The window.getComputedStyle method is not supported in browsers below IE9, GetPropertyValue must be used in conjunction with the getComputedStyle method. IE supports the Currentstyle property, but still cannot get the attributes of the pseudo element.

Gets the exact method of the specified element's CSS property value.

The code is as follows

Copy Code

<script type= "Text/javascript" > function GetStyle (elem, name) { If the property exists in style[], it has recently been set (and is the current) if (Elem.style[name]) { return Elem.style[name]; } Otherwise, try IE in the way else if (Elem.currentstyle) { return Elem.currentstyle[name]; } Or the method of the consortium, if it exists. else if (Document.defaultview && document.defaultView.getComputedStyle) { It uses the traditional "text-align" style of the rules of writing, rather than "textAlign" name = Name.replace ([[A-z])/g, "-$1"); Name = Name.tolowercase (); Gets the style object and obtains the value of the property, if present var s = document.defaultView.getComputedStyle (Elem, ""); return s && s.getpropertyvalue (name); Otherwise, you're using a different browser. } Else { return null; } } </script>