DOM2 style rules for the consortium
==========================================================
Cssstylesheet Objects
The Cssstylesheet object represents all CSS style sheets, including external style sheets and embedded style sheets that are specified using the <style type= "text/css" ></style> tags.
Cssstylesheet is also built on the basis of other DOM2 CSS objects, while cssstylerule objects represent each rule in the style sheet.
The Document.stylesheets property allows you to get a list of the Cssstylesheet objects in the document, each of which has the following properties
Type is always text/css
Disabled whether the corresponding style sheet should be or is disabled in the current document
The URL of the HREF style sheet relative to the current document
Title Grouping style label
Target device type for media style application (screen, print)
Ownerrule read-only Cssrule object, if the style is imported with @import, representing its 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) removes rules from the style sheet
Cssstylerule Objects
Each Cssstylesheet object contains a set of Cssstylerule objects inside it. Each of these objects corresponds to a rule similar to the following:
boyd{
Font:lucida,verdana,sans-serif;
Background: #c7600f;
Color: #1a3800;
}
The Cssstylerule object has the following properties:
Type inherits from an attribute of the Cssrule object, using a number in 0~6 to represent the rule type
Csstext all rules in the current state as a string
Parentstylesheet refers to the parent Cssstylerule object
Parentrule If the rule is in another rule, the property refers to another Cssrule object
Selectortext A selector that contains a rule
Style, similar to Htmlelement.style, is an instance of a Cssstyledeclaration object
Cssstyledeclaration Objects
Represents the style property of an element, similar to the Cssstylerule object, where the Cssstyledeclaration has the following properties:
Csstext all rules in string form
Parentrule will reference Cssstylerule object
==========================================================
GetPropertyValue (propertyname) CSS style property value
Removeproperty (PropertyName) Removes a property from the declaration
SetProperty (propertyname,value,priority) Set CSS property values
putting styles outside of DOM scripts
=========================================================
Style Property
The Style property itself is a Cssstyledeclaration object that represents all the different CSS styles for a particular element, and the style property only accesses the CSS properties that are declared inline in the element's style property. In other words, the style property cannot be accessed to a CSS property that is stacked over a multiple-style surface or inherited from a parent element.
Copy Code code as follows:
Element.style.backgroundColor = ' red '; Background-color is converted to the case, the required
To set the style of an element with 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 property
For (property in styles) {
Non-styles directly defined properties
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 styles based on classname
Element.classname + = ' newclass ';
Accessing calculation Styles
Before you can modify the performance of an element, you may want to first determine its current style attributes, because the style attribute of the element only applies to styles that are defined inline, so you cannot get the calculation style by using the style. The DOM2 specification contains a method named getComputedStyle () in Document.defaultview that returns a read-only Cssstyledeclaration object that contains all the calculated styles for a particular element, as follows:
Copy Code code as follows:
var styles = Document.defaultView.getComputedStyle (element);
var color = styles.getproperty (' Background-color ');
However, Microsoft has its own property Element.currentstyle version
Copy Code code as follows:
Gets 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;
}
