JS get CSS styles (style/getComputedStyle/currentstyle.pdf, style.css style sheet

JS get CSS styles (style/getComputedStyle/currentstyle.pdf, style.css style sheet

CSS styles are classified into three types:
Embedded style:It is written in the Tag. The embedded style is only valid for all tags.
Internal style:It is written in HTML, and the internal style is only valid for the webpage.
External style sheet:If many web pages are used in the same style (styles), write the style (styles)in a CSS file suffixed with .css, and then reference the CSS file on each page that requires Styles.

GetComputedStyleIs a CSS attribute value that can be used to obtain all the final CSS attribute values of the current element. The returned result is a CSS style object ([object CSSStyleDeclaration]).
CurrentStyleIs an attribute of IE, and the returned CSS style object

Element indicates the DOM object obtained by JS.
Element. style // only embedded styles can be obtained
Element. currentStyle // IE browser to obtain non-embedded styles
Window. getComputedStyle (element, pseudo class) // non-IE browser obtains non-embedded Style
Document. defaultView. getComputedStyle (element, pseudo class) // non-IE browser obtains non-embedded styles
Note:Before Gecko 2.0 (Firefox 4/Thunderbird 3.3/SeaMonkey 2.1), the second parameter "pseudo class" is required (if it is not a pseudo class, set it to null ), you can omit this parameter.

The following html contains two css styles. The div with id as tag is an embedded style, and the div style with id as test is an internal style.

<! Doctype html> 
JS Section

<Script type = "text/javascript"> window. onload = function () {var test = document. getElementById ("test"); var tag = document. getElementById ("tag"); // CSS style object: CSS2Properties {}, CSSStyleDeclaration console. log (test. style); // Firefox returns the empty object CSS2Properties {}, and Google returns the empty object CSSStyleDeclaration {} console. log (tag. style); // return CSS2Properties {width: "500px", height: "300px", background-color: "pink"} // element. the style gets an embedded style, If it is not embedded, it is an empty object console. log (tag. style. backgroundColor); // pink console. log (tag. style ['background-color']); // pink // you can obtain two styles similar to background-color, border-radius, and padding-left. log (test. currentStyle) // Firefox and Google are Undefined, and IE returns the CSS object console. log (window. getComputedStyle (test, null) // Google returns CSSStyleDeclaration {......}, Firefox returns CSS2Properties {......} Console. log (window. getComputedStyle (test) // The effect is the same as above, but before Gecko 2.0 (Firefox 4/Thunderbird 3.3/SeaMonkey 2.1, the second parameter "pseudo-class" is required (if it is not a pseudo-class, set it to null) console. log (test. currentStyle. width); // 500px (IE) console. log (window. getComputedStyle (test ). width); // 500px; console. log (window. getComputedStyle (test) ['width']); // 500px; // document. defaultView. getComputedStyle (element, null) [attr]/window. getComputedStyle (element, null) [attr]} </script>
The above example only verifies whether the previous discussion is correct.
For simplicity, we can also make a simple encapsulation of the obtained style.
Function getStyle (element, attr) {if (element. currentStyle) {return element. currentStyle [attr];} else {return window. getComputedStyle (element, null) [attr] ;}} console. log (getStyle (test, "cssFloat"); // left console. log (getStyle (test, "float"); // left, CSS float is required for FF and chrome earlier, but no console is required now. log (getStyle (test, "stylefloat"); // Firefox and Google are both undefined consoles. log (getStyle (test, "styleFloat"); // styleFloat, IE9, and above must be used below IE9. styleFloat and cssFloat consoles are supported. log (window. getComputedStyle (test ). getPropertyValue ("float "))
Corresponding to the float style, styleFloat is used in IE, while CSS float is used in FF and chrome earlier. Currently, FF and Chrome support float, and some other attributes are not listed one by one, in order not to remember these differences, we will introduce two methods to access CSS style objects:
GetPropertyValue and getAttribute
IE9 and other browsers (getPropertyValue)
Window. getComputedStyle (element, null). getPropertyValue ("float ");
Element. currentStyle. getPropertyValue ("float ");
GetPropertyValue does not support hump writing. (Compatible with IE9 and later versions, FF, Chrom, Safari, and Opera)
For example, window. getComputedStyle (element, null). getPropertyValue ("background-color ");
For IE6 ~ 8. You must use the getAttribute method to access the attributes of CSS style objects.
Element. currentStyle. getAttribute ("float"); // styleFloat is no longer required
Element. currentStyle. getAttribute ("backgroundColor"); // The attribute name must be written as a camper; otherwise, IE6 is not supported. If IE6 is ignored, you can write it as "background-color"
The above is all the content in this article. I hope it will be helpful for you to learn and easily use JS to get CSS styles.
Articles you may be interested in:

 

 
  
Use JavaScript to obtain js, css, Flash, and other files on the webpage.
 
  
Javascript to get specific CSS property values
 
  
Obtain the js functions currentStyle (IE) and defaultView (FF) of the style in the css style sheet)
 
  
How to Get and set CSS 3 attribute values in js
 
  
Javascript code example for getting element CSS styles
 
  
Js gets the css attribute value code in the class of an element.
 
  
JS uses the getComputedStyle () method to obtain the CSS Attribute Value
 
  
Js gets the browser version to adjust the CSS style.
 
  
Javascript code for obtaining CSS pseudo element attributes