Javascript code for obtaining CSS pseudo element attributes

Javascript code for obtaining CSS pseudo element attributes

CSS pseudo elements are very powerful. They are often used to create CSS triangle prompts. Using CSS pseudo elements can achieve some simple effects without adding additional HTML tags. One thing is that Javascript cannot get these CSS attribute values, but now there is a way to get them:

Take a 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 obtain the color attribute 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')

Pass the pseudo element as the second parameter to the window. getComputedStyle method to obtain its CSS attribute. Put this code in your tool function set. This method will be useful as pseudo elements are supported by more and more browsers.

Note: The window. getComputedStyle method is not supported by browsers under IE9. getPropertyValue must be used together with the getComputedStyle method. IE supports the CurrentStyle attribute, but cannot obtain the attribute of the pseudo element.

Accurately obtains the CSS attribute values of a specified element.

<Script type = "text/javascript"> function getStyle (elem, name) {// if this attribute exists in style, then it has been recently set (and is the current) if (elem. style [name]) {return elem. style [name];} // otherwise, try the IE Method else if (elem. currentStyle) {return elem. currentStyle [name];} // or W3C method. if so, else if (document. defaultView & document. defaultView. getComputedStyle) {// it uses the traditional "text-Align" style rule writing method, instead of "textAlign" name = name. replace (/([A-Z])/g, "-$1"); name = name. toLowerCase (); // get the style object and obtain the attribute value (if any) var s = document. defaultView. getComputedStyle (elem, ""); return s & s. getPropertyValue (name); // otherwise, it is using another browser} else {return null ;}</script>

Can the javascript or jquery method change the css pseudo element: before,: after style?

Looks like there is ...... Javascript modifies css to write to the style attribute of the element. The: before,: after pseudo class is a virtual element ...... How to change ...... If you have to modify it, we recommend that you switch to the. info class and design two classes with the before class. You need to modify the elements with the class, for example
. Info: before {
Content: "infomation ";
Border: 1px solid # ccc;
}
. Info_other: before {
Content: "infomation ";
Border: 2px solid #000;
},
Change. info to. info_other when you need to modify it.

How does javaScript obtain css style attributes?

This. style. color
This. style. display
Obtain
This indicates that you want to obtain the style object. You can use document. getElementById to obtain the object, which is unnecessary.