Parse how js gets css styles and jscss styles

Parse how js gets css styles and jscss styles

1. Get inline styles

<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, the browser can be divided into two methods:

(2.1)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 browserThe getComputedStyle () method is not supported, but each label element has an attribute similar to the currentStyle 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>

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!