PS: is to get the style, not to set the style. If no style value is set for the element, the default value given by the browser is returned. (Forum finishing)
1. Element.style: can only get the style values written in the style attribute in the element label, cannot get to the definition in <style></style> and through <link href= "Css.css" > Load in style properties
Copy Code code as follows:
var ele = document.getElementById (' ele ');
Ele.style.color; Get color
2, window.getComputedStyle (): Can get the current element of all the final use of CSS property values.
Copy Code code as follows:
window.getComputedStyle ("element", "pseudo class");
This method takes two parameters: the element to get the calculated style and a pseudo-element string (for example, ": Before"). If pseudo element information is not required, the second argument can be null. You can also use the Document.defaultView.getComputedStyle ("element", "pseudo class");
Copy Code code as follows:
var ele = document.getElementById (' ele ');
var styles = window.getComputedStyle (ele,null);
Styles.color; Get color
You can view the number of browser default styles by Style.length. Ie6-8 does not support this method, you need to use the following method. For Firefox and Safari, colors are converted to RGB format.
3, Element.currentStyle:IE dedicated, return is the element of the current application of the final CSS attribute values (including the external chain CSS file, the page embedded <style> properties, etc.).
Copy Code code as follows:
var ele = document.getElementById (' ele ');
var styles = Ele.currentstyle;
Styles.color;
Note: For integrated properties border, ie returns undefined, other browsers have return values, some do not return, but borderleftwidth such attributes are returned values
4, GetPropertyValue (): Get the Direct property name of the CSS style
Copy Code code as follows:
var ele = document.getElementById (' ele ');
window.getComputedStyle (Ele,null). GetPropertyValue (' color ');
Note: The property name does not support the hump format, IE6-8 does not support this method, you need to use the following method
5, GetAttribute (): Similar to the GetPropertyValue, there is a little difference is the attribute name hump format
Copy Code code as follows:
var test = document.getElementById (' test ');
window.getComputedStyle (test, NULL). GetPropertyValue ("BackgroundColor");
Note: This method only supports ie6-8.
The following get style methods compatible with IE, Chrome, Firefox, etc.
Copy Code code as follows:
function GetStyle (ele) {
var style = null;
if (window.getComputedStyle) {
style = window.getComputedStyle (ele, NULL);
}else{
style = Ele.currentstyle;
}
return style;
}
In jquery, the common CSS () gets the style attributes, and the underlying operation uses the getComputedStyle and GetPropertyValue methods.
