The DOM Level 2 Cascading Style Sheets (CSS
) interfaces
are designed with the goal of exposing CSS constructs to object
model consumers. Cascading Style Sheets is a declarative syntax
for defining presentation rules, properties and ancillary
constructs used to format and render Web documents. This document
specifies a mechanism to programmatically access and modify
the rich style and presentation control provided by CSS
(specifically CSS level two
).
This augments CSS by providing a mechanism to dynamically control
the inclusion and exclusion of individual style sheets, as well as
manipulate CSS rules and properties.
This set of interfaces represents the generic notion of style sheets. While the goal of this specification is to represent CSS style sheets, these interfaces may be applied to other types of style sheets.
The StyleSheet interface is the abstract base interface for any type
of style sheet. It represents a single style sheet associated
with a structured document. In HTML, the StyleSheet interface
represents either an external style sheet, included via the HTML
LINK
element, or an inline
STYLE
element. In XML, this interface represents an external
style sheet, included via a style sheet
processing instruction
.
interface StyleSheet {
readonly attribute DOMString type;
attribute boolean disabled;
readonly attribute Node owningNode;
readonly attribute StyleSheet parentStyleSheet;
readonly attribute DOMString href;
readonly attribute DOMString title;
readonly attribute DOMString media;
};
typeowningNode.
A list of registered content types
can be found at ftp://ftp.isi.edu/in-notes/iana/assignments/media-types/
.
Also see the type attribute definition
for the LINK
element in HTML 4.0, and the type pseudo-attribute for the XML style sheet
processing instruction
.
disabledfalse if the style sheet is applied to the document.
true if it is not.
owningNodeLINK or STYLE
element. For XML, it may be the linking processing instruction. For
included style sheets, this attribute has a value of null.
parentStyleSheethrefLINK
element in HTML 4.0, and the href pseudo-attribute for the XML style sheet
processing instruction
.
titleowningNode.
See the title attribute definition
for the LINK element in HTML 4.0, and the title pseudo-attribute for the XML style sheet
processing instruction
.
mediaowningNode.
See the media attribute definition
for the LINK element
in HTML 4.0, and the media pseudo-attribute for the XML style sheet
processing instruction
.
The StyleSheetCollection interface provides the
abstraction of an ordered collection of style sheets.
interface StyleSheetCollection {
readonly attribute unsigned long length;
StyleSheet item(in unsigned long index);
};
lengthitemindex |
Index into the collection |
index position in the
StyleSheetCollection, or null if
that is not a valid index.
The interfaces within this section are considered fundamental, and must be implemented by all conforming applications of this specification. These interfaces represent CSS style sheets specifically.
The CSSStyleSheet interface is a concrete interface used
to represent a CSS style sheet i.e. a style sheet whose content type
is "text/css".
interface CSSStyleSheet : StyleSheet {
readonly attribute CSSRuleCollection cssRules;
unsigned long insertRule(in DOMString rule,
in unsigned long index)
raises(DOMException);
void deleteRule(in unsigned long index)
raises(DOMException);
};
cssRulesinsertRulerule |
The parsable text representing the rule. For rule sets this contains both the selector and the style declaration. For at-rules, this specifies both the at-identifier and the rule content. | |
index |
The index within the style sheet's rule collection of the rule before which to insert the specified rule. If the specified index is equal to the length of the style sheet's rule collection, the rule will be added to the end of the style sheet. |
DOMExceptionHIERARCHY_REQUEST_ERR: Raised if the rule cannot be inserted
at the specified index e.g. if an @import rule
is inserted after a standard rule set or other at-rule.
INDEX_SIZE_ERR: Raised if the specified index is not a valid insertion point.
SYNTAX_ERR: Raised if the specified rule has a syntax error and is unparsable.
deleteRuleindex |
The index within the style sheet's rule collection of the rule to remove. |
DOMExceptionINDEX_SIZE_ERR: Raised if the specified index does not correspond to a rule in the style sheet's rule collection.
The CSSRuleCollection interface provides the
abstraction of an ordered collection of CSS rules.
interface CSSRuleCollection {
readonly attribute unsigned long length;
CSSRule item(in unsigned long index);
};
lengthitemindex |
Index into the collection |
index position in the
CSSRuleCollection, or null if
that is not a valid index.
The CSSRule interface is the abstract base interface
for any type of CSS statement
.
This includes both rule sets
and
at-rules
.
interface CSSRule {
// RuleType
const unsigned short UNKNOWN_RULE = 0;
const unsigned short STYLE_RULE = 1;
const unsigned short IMPORT_RULE = 2;
const unsigned short MEDIA_RULE = 3;
const unsigned short FONT_FACE_RULE = 4;
const unsigned short PAGE_RULE = 5;
readonly attribute unsigned short type;
attribute DOMString cssText;
readonly attribute CSSStyleSheet parentStyleSheet;
};
An integer indicating which type of rule this is.
| UNKNOWN_RULE |
The rule is a |
| STYLE_RULE |
The rule is a |
| IMPORT_RULE |
The rule is a |
| MEDIA_RULE |
The rule is a |
| FONT_FACE_RULE |
The rule is a |
| PAGE_RULE |
The rule is a |
typecssTextparentStyleSheet
The CSSStyleRule interface represents a single rule set
in a CSS style sheet.
interface CSSStyleRule : CSSRule {
attribute DOMString selectorText;
readonly attribute CSSStyleDeclaration style;
};
selectorTextstyle
The CSSMediaRule interface represents a @media
rule
in a CSS style sheet. A @media rule can be
used to delimit style rules for specific media types.
interface CSSMediaRule : CSSRule {
attribute DOMString mediaTypes;
readonly attribute CSSRuleCollection cssRules;
unsigned long insertRule(in DOMString rule,
in unsigned long index)
raises(DOMException);
void deleteRule(in unsigned long index);
};
mediaTypes"@media" specifier.
cssRulesinsertRulerule |
The parsable text representing the rule. For rule sets this contains both the selector and the style declaration. For at-rules, this specifies both the at-identifier and the rule content. | |
index |
The index within the media block's rule collection of the rule before which to insert the specified rule. If the specified index is equal to the length of the media blocks's rule collection, the rule will be added to the end of the media block. |
DOMExceptionHIERARCHY_REQUEST_ERR: Raised if the rule cannot be inserted
at the specified index. e.g. if an @import rule
is inserted after a standard rule set or other at-rule.
INDEX_SIZE_ERR: Raised if the specified index is not a valid insertion point.
SYNTAX_ERR: Raised if the specified rule has a syntax error and is unparsable.
deleteRuleindex |
The index within the media block's rule collection of the rule to remove. |
The CSSFontFaceRule interface represents a @font-face
rule
in a CSS style sheet. The @font-face rule
is used to hold a set of font descriptions.
interface CSSFontFaceRule : CSSRule {
readonly attribute CSSStyleDeclaration style;
};
style
The CSSPageRule interface represents a @page
rule
within a CSS style sheet. The @page rule is
used to specify the dimensions, orientation, margins, etc. of a page box
for paged media.
interface CSSPageRule : CSSRule {
attribute DOMString selectorText;
readonly attribute CSSStyleDeclaration style;
};
selectorTextstyle
The CSSImportRule interface represents a @import
rule
within a CSS style sheet. The @import rule
is used to import style rules from other style sheets.
interface CSSImportRule : CSSRule {
attribute DOMString href;
attribute DOMString media;
readonly attribute CSSStyleSheet styleSheet;
};
href"url(...)" specifier around the URI.
mediastyleSheet
The CSSUnkownRule interface represents an at-rule not
supported by this user agent.
interface CSSUnknownRule : CSSRule {
};
The CSSStyleDeclaration interface represents a single
CSS declaration block
. This interface may be used to determine the style properties
currently set in a block or to set style properties explicitly within
the block.
interface CSSStyleDeclaration {
attribute DOMString cssText;
DOMString getPropertyValue(in DOMString propertyName);
DOMString getPropertyPriority(in DOMString propertyName);
void setProperty(in DOMString propertyName,
in DOMString value,
in DOMString priority)
raises(DOMException);
readonly attribute unsigned long length;
DOMString item(in unsigned long index);
};
cssTextgetPropertyValuepropertyName |
The name of the CSS property. See the CSS property index . |
getPropertyPriority"!important" qualifier) if the property
has been explicitly set in this declaration block.
propertyName |
The name of the CSS property. See the CSS property index . |
"!important")
if one exists. The empty string if none exists.
setPropertypropertyName |
The name of the CSS property. See the CSS property index . | |
value |
The new value of the property. | |
priority |
The new priority of the property (e.g. |
DOMExceptionSYNTAX_ERR: Raised if the specified value has a syntax error and is unparsable.
lengthitemindex |
Index of the property name to retrieve. |
The interfaces found within this section are not mandatory. They may be implemented by a DOM implementation as a convenience to the DOM script user.
The CSS2Properties interface represents a convenience
mechanism for retrieving and setting properties within a
CSSStyleDeclaration. The attributes of this interface
correspond to all the properties specified in CSS2
. Getting an attribute of this
interface is equivalent
to calling the getPropertyValue method of the
CSSStyleDeclaration interface. Setting an attribute of this
interface
is equivalent to calling the setProperty method of
the CSSStyleDeclaration interface.
A compliant implementation is not required to implement the
CSS2Properties interface.
interface CSS2Properties {
attribute DOMString azimuth;
attribute DOMString background;
attribute DOMString backgroundAttachment;
attribute DOMString backgroundColor;
attribute DOMString backgroundImage;
attribute DOMString backgroundPosition;
attribute DOMString backgroundRepeat;
attribute DOMString border;
attribute DOMString borderCollapse;
attribute DOMString borderColor;
attribute DOMString borderSpacing;
attribute DOMString borderStyle;
attribute DOMString borderTop;
attribute DOMString borderRight;
attribute DOMString borderBottom;
attribute DOMString borderLeft;
attribute DOMString borderTopColor;
attribute DOMString borderRightColor;
attribute DOMString borderBottomColor;
attribute DOMString borderLeftColor;
attribute DOMString borderTopStyle;
attribute DOMString borderRightStyle;
attribute DOMString borderBottomStyle;
attribute DOMString borderLeftStyle;
attribute DOMString borderTopWidth;
attribute DOMString borderRightWidth;
attribute DOMString borderBottomWidth;
attribute DOMString borderLeftWidth;
attribute DOMString borderWidth;
attribute DOMString bottom;
attribute DOMString captionSide;
attribute DOMString clear;
attribute DOMString clip;
attribute DOMString color;
attribute DOMString content;
attribute DOMString counterIncrement;
attribute DOMString counterReset;
attribute DOMString cue;
attribute DOMString cueAfter;
attribute DOMString cueBefore;
attribute DOMString cursor;
attribute DOMString direction;
attribute DOMString display;
attribute DOMString elevation;
attribute DOMString emptyCells;
attribute DOMString cssFloat;
attribute DOMString font;
attribute DOMString fontFamily;
attribute DOMString fontSize;
attribute DOMString fontSizeAdjust;
attribute DOMString fontStretch;
attribute DOMString fontStyle;
attribute DOMString fontVariant;
attribute DOMString fontWeight;
attribute DOMString height;
attribute DOMString left;
attribute DOMString letterSpacing;
attribute DOMString lineHeight;
attribute DOMString listStyle;
attribute DOMString listStyleImage;
attribute DOMString listStylePosition;
attribute DOMString listStyleType;
attribute DOMString margin;
attribute DOMString marginTop;
attribute DOMString marginRight;
attribute DOMString marginBottom;
attribute DOMString marginLeft;
attribute DOMString markerOffset;
attribute DOMString marks;
attribute DOMString maxHeight;
attribute DOMString maxWidth;
attribute DOMString minHeight;
attribute DOMString minWidth;
attribute DOMString orphans;
attribute DOMString outline;
attribute DOMString outlineColor;
attribute DOMString outlineStyle;
attribute DOMString outlineWidth;
attribute DOMString overflow;
attribute DOMString padding;
attribute DOMString paddingTop;
attribute DOMString paddingRight;
attribute DOMString paddingBottom;
attribute DOMString paddingLeft;
attribute DOMString page;
attribute DOMString pageBreakAfter;
attribute DOMString pageBreakBefore;
attribute DOMString pageBreakInside;
attribute DOMString pause;
attribute DOMString pauseAfter;
attribute DOMString pauseBefore;
attribute DOMString pitch;
attribute DOMString pitchRange;
attribute DOMString playDuring;
attribute DOMString position;
attribute DOMString quotes;
attribute DOMString richness;
attribute DOMString right;
attribute DOMString size;
attribute DOMString speak;
attribute DOMString speakHeader;
attribute DOMString speakNumeral;
attribute DOMString speakPunctuation;
attribute DOMString speechRate;
attribute DOMString stress;
attribute DOMString tableLayout;
attribute DOMString textAlign;
attribute DOMString textDecoration;
attribute DOMString textIndent;
attribute DOMString textShadow;
attribute DOMString textTransform;
attribute DOMString top;
attribute DOMString unicodeBidi;
attribute DOMString verticalAlign;
attribute DOMString visibility;
attribute DOMString voiceFamily;
attribute DOMString volume;
attribute DOMString whiteSpace;
attribute DOMString widows;
attribute DOMString width;
attribute DOMString wordSpacing;
attribute DOMString zIndex;
};
azimuthbackgroundbackgroundAttachmentbackgroundColorbackgroundImagebackgroundPositionbackgroundRepeatborderborderCollapseborderColorborderSpacingborderStyleborderTopborderRightborderBottomborderLeftborderTopColorborderRightColorborderBottomColorborderLeftColorborderTopStyleborderRightStyleborderBottomStyleborderLeftStyleborderTopWidthborderRightWidthborderBottomWidthborderLeftWidthborderWidthbottomcaptionSideclearclipcolorcontentcounterIncrementcounterResetcuecueAftercueBeforecursordirectiondisplayelevationemptyCellscssFloatfontfontFamilyfontSizefontSizeAdjustfontStretchfontStylefontVariantfontWeightheightleftletterSpacinglineHeightlistStylelistStyleImagelistStylePositionlistStyleTypemarginmarginTopmarginRightmarginBottommarginLeftmarkerOffsetmarksmaxHeightmaxWidthminHeightminWidthorphansoutlineoutlineColoroutlineStyleoutlineWidthoverflowpaddingpaddingToppaddingRightpaddingBottompaddingLeftpagepageBreakAfterpageBreakBeforepageBreakInsidepausepauseAfterpauseBeforepitchpitchRangeplayDuringpositionquotesrichnessrightsizespeakspeakHeaderspeakNumeralspeakPunctuationspeechRatestresstableLayouttextAligntextDecorationtextIndenttextShadowtextTransformtopunicodeBidiverticalAlignvisibilityvoiceFamilyvolumewhiteSpacewidowswidthwordSpacingzIndex
A collection of all stylesheets linked into or embedded in
the document is exposed through the styleSheets attribute.
In HTML, this collection contains both external style sheets,
included via the
LINK
element, and inline style sheets, included via
STYLE
elements. In XML, this collection contains all external
style sheets included via a style sheet
processing instruction
.
interface Document2 : Document {
readonly attribute StyleSheetCollection styleSheets;
};
Inline style information attached to HTML elements is exposed
through the style attribute. This represents the
contents of the
STYLE
attribute for HTML elements.
interface HTMLElement2 : HTMLElement {
readonly attribute CSSStyleDeclaration style;
};
The style sheet associated with an HTML STYLE element is accessible via the styleSheet attribute.
interface HTMLStyleElement2 : HTMLStyleElement {
readonly attribute StyleSheet styleSheet;
};
The styleSheet associated with an HTML LINK element with a REL
of "stylesheet" or "alternate stylesheet" is not accessible
directly. This is because LINK elements are not used
purely as a stylesheet
linking mechanism. The styleSheet property on LINK elements
with other relationships would be incongruous.