JavaScript get element style must kill skill

This article mainly introduces the JavaScript to get the element style must kill the skill, the need friend may refer to under

JavaScript gets CSS property value method: getComputedStyle and Currentstyle

1. Inline CSS style for elements (

Hello

Can directly use Element.style.color to get the value of 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, the Currentstyle and Style objects 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

The code is 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;

}

Note : Please pay attention to the triple Programming Tutorials section for more wonderful articles .