javascript dynamically modify styles and cascading style sheet code_javascript skills

W3C DOM2 Style Rules
================================================ ===============
CSSStyleSheet object
The CSSStyleSheet object represents all CSS style sheets, including external style sheets and those using tag.
CSSStyleSheet is also built on other DOM2 CSS objects, and the CSSStyleRule object represents each rule in the style sheet.
A list of CSSStyleSheet objects in the document can be obtained through the document.stylesheets property. Each object has the following attributes
type 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　ulousdieure_/ > href 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　    should should be needed Parent rule
cssRules Read-only cssRuleList list object, containing all CSSRule objects in the style sheet
============================== ==============================
insertRule(rule,index)　Add a new style declaration
deleteRule(index )　　　Removing rules from the style sheet

CSSStyleRule object

　 Each CSSStyleSheet object contains a set of CSSStyleRule objects. These objects respectively correspond to a rule similar to the following:
boyd{
font:lucida,verdana,sans-serif; background:#c7600f; color:#1a3800;
}

CSSStyleRule object has the following properties:

Type All rules of
parentStyleSheet refer to the parent CSSStyleRule object
parentRule If the rule is in another rule, this property refers to another CSSRule object selectorText Contains the selector of the rule
style Similar to HTMLElement.style, it is An instance of CSSStyleDeclaration object
CSSStyleDeclaration object

Represents the style attribute of an element. Similar to CSSStyleRule object, CSSStyleDeclaration has the following properties:
cssText All rules expressed in string form
parentRule will refer to the CSSStyleRule object
========================================= ================= getPropertyValue(propertyName)　 CSS style property value removeProperty(propertyName)　 Remove the property from the declaration
setProperty(propertyName,value, priority)　Set CSS attribute values

Put styles outside the DOM script

======================== =================================
style attribute
The style attribute itself is a property that represents a specific element. The CSSStyleDeclaration objects of all different CSS styles can only access the CSS properties declared inline in the style attribute of the element through the style attribute. In other words, CSS properties that are cascaded from multiple style sheets or inherited from parent elements cannot be accessed through the style attribute.


Copy code

The code is as follows:

element.style.backgroundColor = 'red'; //background-color is converted to uppercase and lowercase, required
//Set the style of the element with the id "example"
setStyleById( 'example',{
'background-color' : 'red',
'border' : '1px solid black',
'padding' : '1px',
'margin' 1px'
});
function setStyle(elementid,styles){
var element = document.getElementById(elementid);
// Loop through the styles object and apply each attribute
for (property in styles){
　　 // Properties not directly defined by styles
　if(!styles.hasOwnProperty(property)) continue;
　　
　if(element.style.setProperty){
element.style.setProperty(uncamlize(property, '-'), styles[property], null);
　　} else {
　　　element.style[camelize(property)] = styles[property];
}
　}
　
　return true;
}
//Convert word-word to wordWord
function camelize(s) {
return s.replace(/-( w)/g, function(math,p1){
return p1.toUpperCase();
});
}
//Convert wordWord to word-word
function uncamelize( s, sep) {
sep = sep || '-';
return s.replace(/([a-z])([A-Z])/g, function (match, p1, p2){
return p1 sep p2.toLowerCase();
});
}
//Switch style based on className
element.className = 'newclass';

Access calculated styles
Before modifying the performance of an element, you may want to first determine its current style attributes. Since the style attribute of an element only applies to styles defined in an embedded manner, it cannot be passed through style To obtain the calculated style, the DOM2 specification includes a method called getComputedStyle() in document.defaultView. This method returns a read-only CSSStyleDeclaration object that contains all calculated styles of a specific element, as follows:

Copy code The code is as follows:

　var styles = document.defaultView.getComputedStyle(element);
　var color = styles.getProperty ('background-color');

But Microsoft has its own version of the property element.currentStyle

Copy code The code is as follows:

//Get the calculation style of an element
function getStyle(element,property) {
　var value = element.style[camelize(property)];
　if(!value) {
　if(document.defaultView && document.defaultView.getComputedStyle) {
　　value = document.defaultView.getComputedStyle(element).getPropertyValue(property);
　　} else if (element.currentStyle) {
　　value = element.currentStyle[camelize(property)];
　　　}
　　}
　 return value;
}