There are generally two ways in which JavaScript accesses CSS properties: "access through elements" and "access directly on style sheets". In addition, there is a problem that cannot be ignored when accessing styles - runtime styles.
1. Access through elements
Since you want to access the style sheet through elements, you should first determine which element it is. This is the content of DOM, so I won’t say more about it here. After obtaining the reference, you can access a certain attribute through "Reference.style. Attribute to access". For example, see the following code.
<pre name="code"><pre name="code"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #a{ height:100px; width:100px; background-color:red; } </style> </head> <body> <div id="a"></div> </body> </html>When we want to get the background color of #a, we can document.getElementById("a").style.backgroundColor; this way, the access is completed. After that, whether to return or change the attribute value, it's up to you.
2. Direct access to the style sheet
In general, direct access to the style sheet is "first find the corresponding style block, then find the corresponding style rules in the style block, and finally find the corresponding style in the style rule."
Let’s talk about what style blocks are first. In the code, the CSS code will exist between the <style></style> tags or in <link>, and a <style></style> or <link> is a style block. In the code, multiple code blocks may be arranged in sequence from top to bottom, and we can access style blocks like we access array elements. For example, if we want to access the first one in the style block, we can document.styleSheets[0]
Then say what style rules are. First look at the following code
<pre name="code"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #a{ height:100px; width:100px; background-color:red; } #b{ height:100px; width:100px; background-color:blue; } </style> </head> <body> <div id="a"></div> <div id="b"></div> </body> </html>The code specifies the styles of #a and #b respectively. The collection of styles of #a or the collection of #b is a style rule. In this style block, the first style rule for #a and the second style rule for #b. We can also access style rules like we can access array elements. For example, if we want to access the #b style rules, we can document.styleSheets[0].cssRules[1] Of course, you can choose to write document.styleSheet[0].rules[1] like this, but this writing method is not supported by Firefox.
Then we can access the corresponding style. For example, if we want to change the background color of #b to green, we can document.styleSheets[0].cssRules[1].style.backgroundColor="green";
3. Runtime style
Look at the following code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #a{ height:100px; width:100px; color:red; } #b{ height:100px; width:100px; } </style> </head> <body> <div id="a"> <div id="b">Observe font color</div> </div> </body> </html>When we run alert(document.getElementById("b").style.color);, we find that nothing is output on the pop-up window, but the font color of the page is obviously red. Why? This is because the style object attributes of each element are not updated instantly. When we want to output red on the pop-up window, we need to use the runtime style. window.getComputedStyle(document.getElementById("b"),null).color so that you can access "red". There is another way to access the runtime style document.getElementById("b").currentStyle.color, but this way is only supported by IE.