getComputedStyle and currentStyle get style (style/class)_javascript skills

Everyone knows that you can get the style information of an element using document.getElementById('element').style.xxx, but it only gets the style rules in the style attribute of the DOM element. For external style sheets referenced through the class attribute , we won’t be able to get the information we want.

There is a global method getComputedStyle in the DOM standard, which can obtain the current object style rule information, such as: getComputedStyle(obj,null).paddingLeft, which can obtain the left padding of the object. But things are not over yet. The evil IE does not support this method. It has its own implementation method, which is currentStyle. Different from the global method getComputedStyle, it exists as a DOM element attribute, such as: obj.currentStyle.paddingLeft. In IE The left inner margin of the object is obtained. The compatibility is written as follows:

Copy the code The code is as follows:

return window.getComputedStyle ? window.getComputedStyle(obj,null).paddingLeft : obj.currentStyle.paddingLeft;

In this way, the current value of the object can be returned in IE and FF style information.

Special note: if you want to get the color information of the current object, IE returns the hexadecimal '#ffffff', while FF returns rgb(255,255,255)

Use js The style attribute can get the style of the html tag, but it cannot get the non-inline style. So how to use js to obtain the non-interline style of css? You can use currentStyle under IE, but we need to use getComputedStyle under Firefox. Here is a small example:

Copy code The code is as follows: