Introduction to several ways to access CSS properties in JavaScript

Introduction to several ways to access CSS properties in JavaScript_javascript tips

WBOY

Release： 2016-05-16 16:41:29

Original

1405 people have browsed it

Generally speaking, there are two ways for JavaScript to access CSS properties: "access through elements" and "direct access to style sheets". In addition, there is an issue 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 the DOM, so I won’t go into details here. After obtaining the reference, you can access an attribute through "reference.style.attribute to be accessed". For example, consider the following code.

<pre name="code" class="html"><pre name="code" class="html"><!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>

Copy after login

When we want to get the background color of #a, we can document.getElementById("a").style.backgroundColor; This completes the access. It is up to you whether you want to return or change the attribute value. .

2. Directly access the style sheet

Directly accessing the style sheet generally means "first find the corresponding style block, then find the corresponding style rule in the style block, and finally find the corresponding style in the style rule."

First of all, let’s talk about style blocks. In the code, the CSS code will exist between the tags or within the . A or is a style block. There may be multiple code blocks arranged from top to bottom in the code, and we can access the style block like an array element. For example, if we want to access the first style block, we can document.styleSheets[0]

Then what are the style rules. First look at the following code

<pre name="code" class="html"><!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>

Copy after login

The styles of #a and #b are respectively specified in the code. The collection of #a styles or the collection of #b is a style rule. In this style block, the first style rule is for #a, and the second style rule is for #b. We can also access style rules just like array elements. For example, if we want to access #b style rules, we can use document.styleSheets[0].cssRules[1]. Of course, you can choose to write document.styleSheet[0].rules[1] like this, but this way of writing is not supported by Firefox.

Then we can access the corresponding styles. 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">观察字体颜色</div> 
</div> 
</body> 
</html>

Copy after login

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 clearly red. Why? This is because the style object properties of each element are not updated immediately. 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 This way you can access "red". There is another way to access the runtime style, document.getElementById("b").currentStyle.color, but this way of writing is only supported by IE.