How to Get css styles in js

I. html document styles can be divided into three forms based on different sources:

(1) external style. That is, the style of the document application comes from the external style sheet. After the style sheet is written, use "<link href =" ***. css "/>" to introduce it to the webpage.

(2) embedded. That is, the style is directly placed in the webpage, but the <style> ...... </Style> tag pairs are included. And finally placed in the head label pair. Compared with external imported style sheets, it can be seen as a more direct introduction.

(3) inline. That is, the style is directly written in the corresponding html tag with the style attribute, such as <div style = "width: 100px; height: 100px ;...... "> </Div>.

2. Because the style sources are different, the methods for getting/setting styles using js are different.

(1) When only inline styles are considered, use the style attribute of the element as follows:

<Div id = "myDiv" style = "width: 100px; height: 100px; background-color: red; border: 1px solid black; "> </div> <script> var myDiv = document. getElementById ("myDiv"); alert (myDiv. style. width); // 100px alert (myDiv. style ['height']); // 100px var style = myDiv. style; alert (style. backgroundColor); // red myDiv. style. backgroundColor = 'green'; // the background color of myDiv changes to green. </script>

In this case, only the style attribute can be used to obtain and set the style, because element. the style attribute returns a set of style attributes and corresponding values similar to the array. Therefore, when accessing a specific style, you can use either of the following methods: "ele. style. attribute name "and" ele. style ['Property name'] ". However, it should be noted that the attribute names of background-color, margin-left, and other parallel bars in css styles, when you use the style attribute to obtain the set style, the name should be changed to the camper type, such as ele. style. backgroundColor.

(2) because the first method is to use the style attribute, only inline styles can be obtained. However, the actual situation is that all documents now basically follow the separation idea, and styles are basically external links, so all three styles must be taken into account. In this case, we need to use other methods to obtain them, in this case, different browsers have different processing methods (mainly ie and non-ie) for getting styles. Therefore, there are two methods based on browsers:

(2.1) in a non-IE browser, use document. the getComputedStyle (ele, null/pseudo class) method of the defaultView object. This method accepts two parameters. The first is the element to be investigated, and the second is based on the situation, if you only want to test the element itself, it is null. If you want to test the pseudo class, it is the pseudo class of the response. This method obtains the final style combination of the element application. It is also an instance similar to an array.

(2.2) in IE browser, the getComputedStyle () method is not supported, but each label element has a currentStyle attribute similar to the style attribute, and its usage is the same as that of the style. However, the obtained style ranges are different. The method obtained by currenStyle is similar to the getComputedStyle () method.

To achieve compatibility in processing, you can create a function based on the two different processing methods to achieve compatibility, so that the style can be obtained successfully in any browser. As follows:

<Style type = "text/css"> # myDiv {background-color: blue; width: 100px; height: 200px ;} </style> <div id = "myDiv" style = "background-color: red; border: 1px solid black;"> </div> <script> var myDiv = document. getElementById ("myDiv"); var finalStyle = myDiv. currentStyle? MyDiv. currentStyle: document. defaultView. getComputedStyle (myDiv, null);/* determine whether currentStyle is supported (whether it is ie) to obtain style */alert (finalStyle. backgroundColor); // "red" alert (finalStyle. width); // "100px" alert (finalStyle. height); // "200px" </script>