JS controls CSS style sheet_javascript skills

Let's first record the methods used by JS to control CSS.

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


You want to 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;ivar rules;
if (document.styleSheets[i].cssRules) {
rules = document.styleSheets[i ].cssRules;
} else {
rules = document.styleSheets[i].rules;
}
for (var j=0;j if (rules[j].selectorText == sname) {
//selectorText attribute is used to replace a selected address. The meaning should be to obtain the CLASSNAME of RULES[J]. Please correct me if I am wrong
return rules[j].style;
}
}
}
}
Then just:

getstyle(".orig").display = "inline ";
That's it.
------------------ Note that document.styleSheets[0].rules[0].style The subscript of the styleSheets[0] array represents the page number N CSS style sheets, the array subscript of its subordinate rules[0] represents the Nth style in this style sheet, for example:

Modify S rules: document.styleSheets[0].rules[0] .style.display='inline';
Modify W rules: document.styleSheets[0].rules[1].style.display = 'inline';
Note: The way CSS and HTML are combined must be < ;LINK rel="stylesheet" type="text/css" href="" /> or , the above method is feasible, but @IMPORT is not.
==== ================================
The following records how JS accesses styles in CSS:
Use javascript Getting and setting style
The DOM standard introduces the concept of overriding the style sheet. When we use document.getElementById("id").style.backgroundColor to get the style, we get only the background color set in the style attribute in the id. If the id If the background-color is not set in the style attribute, it will return empty. That is to say, if the id uses the class attribute to refer to an external style sheet, and the background color is set in this external style sheet, then sorry document.getElementById(" id").style.backgroundColor This way of writing is not easy to use. If you want to get the settings in the external style sheet, you need to use the getComputedStyle() method of the window object. 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.
The compatible way between the two is written as
window.getComputedStyle?window.getComputedStyle(id,null).backgroundColor: id.currentStyle["backgroundColor"];
If you are getting 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 styles in read-only mode.

This article is only for learning, excerpted from Internet search data, without any copyright, and can be reproduced at will, as in the original If the author has different ideas, please feel free to contact me at any time.


Use JavaScript to modify CSS properties

Only write native javascript.

1. Use JS to modify the class attribute value of the label:

The class attribute is one of the ways to reference the style sheet on the label. Its value is a selector of the style sheet. If it is changed If the value of the class attribute is changed, the style sheet referenced by the tag will also be changed, so this is the first modification method.

The code to change the class attribute of a tag is:

document.getElementById( id ).className = string;
document.getElementById( id ) is used to get the DOM corresponding to the tag Object, you can also obtain it using other methods. className is a property of the DOM object that corresponds to the label's class attribute. string is the new value of the class attribute, which should be a defined CSS selector.

Using this method, you can replace the CSS style sheet of the tag with another one, or you can apply the specified style to a tag that does not have a CSS style applied.

Example:

2. Use JS to modify the style attribute value of the tag:
The style attribute is also one of the ways to reference the style sheet on the tag, and its value is a CSS style sheet. The DOM object also has a style attribute, but this attribute itself is also an object. The attributes of the Style object correspond to the CSS attributes one-to-one. When the attributes of the Style object are changed, the CSS attribute value of the corresponding tag will also change, so this is The second modification method.

The code to change the CSS attribute of a tag is:

document.getElementById( id ).style.property name = value;
document.getElementById( id ) is used to get the tag corresponding You can also obtain the DOM object using other methods. style is a property of the DOM object, which is itself an object. Property name is the property name of the Style object, which corresponds to a certain CSS property.

Note: This method modifies a single CSS property. It does not affect the values ​​of other CSS properties on the label.

Example:

Size
ColorBackground
Border