JavaScript gets CSS property value method: getComputedStyle and Currentstyle
1. For the inline CSS style of the element (<div style= "color: #369" >hello</div>), you can directly use Element.style.color to get the value of the CSS property directly;
2. However, external-defined CSS styles are not available in this way, and IE browsers and other standard browsers (Firefox,chrome,opera,safari) use different methods. The IE browser uses the ELEMENT.CURRENTSTYLE,W3C standard browser to use the getComputedStyle to obtain.
1. IE gets the CSS attribute values defined externally by the element: Element.currentstyle
The Currentstyle object returns the style sheet on the element, but the style object returns only the inline style applied to the element through the style label property.
Therefore, the style values obtained through the Currentstyle object may differ from the style values obtained through the style object.
For example, if the Color property value of a paragraph is set to red instead of inline with a linked or embedded style sheet, the object. Currentstyle.color returns the correct color, and the object Style.color cannot return a value. However, if the user specifies <p style= ' color: ' Red ' >,currentstyle and the STYLE object will return the value red.
The Currentstyle object reflects the style precedence in the style sheet. In HTML, this order is:
1) Inline style
2) style sheet rules
3 HTML Tag Properties
4 internal definition of HTML tags
2. The consortium gets the CSS attribute values that are defined externally by the element: window.getComputedStyle (element, Pseudoelt)
Element must be selected, HTML element
Pseudoelt required to get the pseudo class style of the element
Copy Code code as follows:
function GetStyle (node, property) {
if (Node.style[property]) {
return Node.style[property];
}
else if (Node.currentstyle) {
return Node.currentstyle[property];
}
else if (Document.defaultview && document.defaultView.getComputedStyle) {
var style = Document.defaultView.getComputedStyle (node, null);
Return Style.getpropertyvalue (property);
}
return null;
}