JavaScript gets the implementation code _javascript the CSS pseudo element attribute

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:

. 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:

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

 <script type= "Text/javascript" > Function GetStyle (elem, name) {//If the property exists in Sty 
  Le[], 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 Document.defaultview, if it exists if it is present else if (Document.defaultView.getComputedStyle) {//It uses the biography 
    The "text-align" style of the rule writing method, not "textAlign" name = Name.replace ([[A-z])/g, "-$1"); 
    Name = Name.tolowercase (); 
    Gets the style object and obtains the value of the attribute (if present) var s = Document.defaultView.getComputedStyle (Elem, ""); 
  return s && s.getpropertyvalue (name); 
  Otherwise, you are using another browser} else {return null; } {</script>