Home > Web Front-end > JS Tutorial > Summary of all style code examples for javascript to control css style

Summary of all style code examples for javascript to control css style

伊谢尔伦
Release: 2017-07-19 16:43:04
Original
1663 people have browsed it

Record the methods used by JS to control CSS.

Use javascript to change the attributes of a css class...

<style type="text/css"> 
.orig { 
display: none; 
} 
</style>
Copy after login

You want Change its display attribute from none to inline.
Solution: In IE:

document.styleSheets[0].rules[0].style.display = "inline";
Copy after login

In firefox:

document.styleSheets[0].cssRules[0].style.display = "inline";
Copy after login

Discussion: You can make a function to search for style objects with specific names:

function getstyle(sname) { 
for (var i=0;i<document.styleSheets.length;i++) { 
var rules; 
if (document.styleSheets[i].cssRules) { 
rules = document.styleSheets[i].cssRules; 
} else { 
rules = document.styleSheets[i].rules; 
} 
for (var j=0;j<rules.length;j++) { 
if (rules[j].selectorText == sname) { 
//selectorText 属性的作用是对一个选择的地址进行替换.意思应该是获取RULES[J]的CLASSNAME.有说错的地方欢迎指正 
return rules[j].style; 
} 
} 
} 
}
Copy after login

Then just:

getstyle(".orig").display = "inline";
Copy after login

That’s it.
------------------ Note that document.styleSheets[0].rules[0].style The subscript of this styleSheets[0] array represents the first page of this page. N CSS style sheets, the array subscript of its subordinate rules[0] represents the Nth style in this style sheet, for example:

<style type="text/css"> 
.s{display="none";} 
.w{display="none";} 
</style>
Copy after login

Modify S: document.styleSheets [0].rules[0].style.display='inline';
Modify W rule: document.styleSheets[0].rules[1].style.display = 'inline';
Note: CSS The method of combining with HTML must be or . The above method is feasible, but @IMPORT is not. .


The following is a record of JS accessing styles in CSS:
Getting and setting style with javascript
The DOM standard introduces the concept of overwriting style sheets. When we use document.getElementById(" id").style.backgroundColor When getting the style, you only get the background color set in the style attribute in the id. If the background-color is not set in the style attribute in the id, it will return empty. That is to say, if the id is referenced with the class attribute If you have an external style sheet and set the background color in this external style sheet, then sorry, document.getElementById("id").style.backgroundColor is not easy to use. If you want to get the settings in the external style sheet, you need to The getComputedStyle() method of the window object is used. The code is written like this

window.getComputedStyle(id,null).backgroundColor
Copy after login

But the compatibility problem comes again. It works well in Firefox, but not in IE.
How to make the two compatible Written as

window.getComputedStyle?window.getComputedStyle(id,null).backgroundColor:id.currentStyle["backgroundColor"];
Copy after login

If it is to obtain the background color, the return value of this method in firefox and IE is still different. IE returns "#ffff99", while firefox returns "rgb" (238, 44, 34) "
It is worth noting that window.getComputedStyle(id,null) cannot set the style, it can only get it. To set it, you must write something like this id.style.background="# EE2C21";
In IE, CURRENTSTYLE can only obtain the style in read-only mode.




The above is the detailed content of Summary of all style code examples for javascript to control css style. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template