Home > Article > Web Front-end > Introduction to several ways to access CSS properties in JavaScript_javascript tips

Introduction to several ways to access CSS properties in JavaScript_javascript tips

WBOYOriginal: 2016-05-16 16:41:291406browse

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>

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 c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 tags or within the 2cdf5bf648cf2f33323966d7f58a7f3f. A c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 or 2cdf5bf648cf2f33323966d7f58a7f3f 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>

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>

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Methods of declaring functions in JavaScript and return values of calling functions_Basic knowledgeNext article：Methods of declaring functions in JavaScript and return values of calling functions_Basic knowledge

See more

Introduction to several ways to access CSS properties in JavaScript_javascript tips

Related articles