How js gets css styles

You can obtain and set styles only by using the style attribute, 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 [attribute name] ". 1. Get inline styles

Script var myp = document. getElementById ("myp"); alert (myp. style. width); // 100px alert (myp. style ['height']); // 100px var style = myp. style; alert (style. backgroundColor); // red myp. style. backgroundColor = 'green'; // the background color of myp 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:

Script var myp = document. getElementById ("myp"); var finalStyle = myp. currentStyle? Myp. currentStyle: document. defaultView. getComputedStyle (myp, 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 the details about how js gets css styles. For more information, see other related articles in the first PHP community!