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

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>

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

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

In firefox:

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

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; 
} 
} 
} 
}

Then just:

getstyle(".orig").display = "inline";

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>

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

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"];

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!