Home > Web Front-end > JS Tutorial > getComputedStyle and currentStyle get style (style/class)_javascript skills

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

WBOY
Release: 2016-05-16 17:40:01
Original
1088 people have browsed it

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:




js uses currentStyle and getComputedStyle to get the css style







Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template