The following is a record of JS control CSS methods used.
1. Use JavaScript to change the properties of a CSS class ...
<style type= "Text/css" >
. orig {
Display:none;
}
</style>
You want to change his display property 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 do a function to search for a particular name's style object:
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) {
The function of the Selectortext property is to replace a selected address. The meaning should be to obtain the classname of the rules[j. There's a wrong place.
return rules[j].style;
}
}
}
}
And then just:
GetStyle (". Orig"). Display = "inline";
It's OK.
------------------Note Document.stylesheets[0].rules[0].style The subscript for this stylesheets[0] array represents the nth CSS style sheet on this page, its subordinate rules[0] The array subscript represents the nth style in the stylesheet, for example:
<style type= "Text/css" >
. s{display= "None";}
. w{display= "None";}
</style>
Modified s: document.stylesheets[0].rules[0].style.display= ' inline ';
Modify W: document.stylesheets[0].rules[1].style.display = ' inline ';
Note: CSS and HTML must be combined in a way that is <link rel= "stylesheet" type= "Text/css" "href=" "/>" or "<style></style>" when the above method is feasible, If @import is not.
====================================
The following record JS access to the CSS style:
Get and set style in JavaScript
The DOM Standard introduces the concept of overriding stylesheets when we use document.getElementById ("id"). Style.backgroundcolor gets the style only when it gets the background color set in the Style property in the ID. If Background-color is not set in the style attribute in the ID, then it returns empty, that is, if the ID uses the class attribute to refer to an external style sheet, the background color set in the external style sheet, So sorry. document.getElementById ("id"). Style.backgroundcolor this is not the case, if you want to get the settings in the external style sheet, you need to use the Window object's getComputedStyle ( method, the code writes window.getComputedStyle (id,null). backgroundcolor
But the compatibility problem comes again, so write in Firefox, but not in IE
Two compatible ways to write
Window.getcomputedstyle?window.getcomputedstyle (id,null). backgroundcolor:id.currentstyle["BackgroundColor"];
If you get the background color, this method in Firefox and IE return value is not the same, IE is returned to the "#ffff99" appearance, and Firefox returned "RGB (238, 44, 34)"
It is noteworthy that: window.getComputedStyle (id,null) This way can not set the style, can only be obtained, to be set up to be written like this id.style.background= "#EE2C21";
In IE, currentstyle can only get styles in read-only mode.
This article only for the study, extracts the network search data unifies, does not have any copyright, may arbitrarily reprint, if the original author has the different idea, may at any time contact me.
modifying CSS properties with JavaScript
Only the native JavaScript is written.
1. Use JS to modify the label's Class attribute value:
The class attribute is one of the ways to refer to a style sheet on a label, its value is a stylesheet selector, and if the value of the class attribute is changed, the style sheet referenced by the label is replaced, so this is the first way to modify it.
The code to change the class attribute of a label is:
document.getElementById (id). ClassName = string;
document.getElementById (ID) is used to get the DOM object corresponding to the label, and you can also get it in other ways. ClassName is a property of a DOM object that corresponds to the class attribute of the label. A string is a new value for the class attribute and should be a defined CSS selector.
This approach allows you to replace the CSS style sheet of a label with a different one, or to apply a specified style to a label that does not have a CSS style applied to it.
Example:
Copy Code code as follows:
<style type= "Text/css" >
txt
font-size:30px; Font-weight:bold; color:red;
}
</style>
<div id= "tt" > Welcome! </div>
<p><button onclick= "SetClass ()" > Change style </button></p>
<script type= "Text/javascript" >
function SetClass ()
{
document.getElementById ("tt"). ClassName = "txt";
}
</script>
2. Use JS to modify the label's style attribute value:
The Style property is also one of the ways to refer to a style sheet on a label, and its value is a CSS style sheet. The DOM object also has a style attribute, but the property itself is an object, and the properties of the style object and the CSS property are one by one corresponding, and when the properties of the style object are changed, the CSS attribute value of the corresponding label changes, so this is the second method of modification.
The code to change the CSS properties of a label is:
document.getElementById (ID). style. property name = value;
document.getElementById (ID) is used to get the DOM object corresponding to the label, and you can also get it in other ways. Style is a property of a DOM object and is itself an object. The property name is the property name of the Style object, and it corresponds to a CSS property.
Description: This method modifies a single CSS property, and it does not affect other CSS property values on the label.
Example:
Copy Code code as follows:
Div id= "T2" > Welcome! </div>
<p><button onclick= "setSize ()" > Size </button>
<button onclick= "SetColor ()" > Color </button>
<button onclick= "Setbgcolor ()" > Background </button>
<button onclick= "Setbd ()" > Border </button>
</p>
<script type= "text/javascript" >
Function setSize ()
{
document.getElementById ("T2"). Style.fontsize = "30px";
}
Function SetColor ()
{
document.getElementById ("T2"). Style.color = "Red";
}
Function Setbgcolor ()
{
document.getElementById ("T2"). Style.backgroundcolor = "Blue";
}
Function Setbd ()
{
document.getElementById ("T2"). Style.border = "3px solid #FA8072";
}
</script>
