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; };
type
owningNode
.
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
.
disabled
false
if the style sheet is applied to the document.
true
if it is not.
owningNode
LINK
or STYLE
element. For XML, it may be the linking processing instruction. For
included style sheets, this attribute has a value of null.
parentStyleSheet
href
LINK
element in HTML 4.0, and the href pseudo-attribute for the XML style sheet
processing instruction
.
title
owningNode
.
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
.
media
owningNode
.
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); };
length
item
index |
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); };
cssRules
insertRule
rule |
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. |
DOMException
HIERARCHY_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.
deleteRule
index |
The index within the style sheet's rule collection of the rule to remove. |
DOMException
INDEX_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); };
length
item
index |
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 |
type
cssText
parentStyleSheet
The CSSStyleRule
interface represents a single rule set
in a CSS style sheet.
interface CSSStyleRule : CSSRule { attribute DOMString selectorText; readonly attribute CSSStyleDeclaration style; };
selectorText
style
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.
cssRules
insertRule
rule |
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. |
DOMException
HIERARCHY_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.
deleteRule
index |
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; };
selectorText
style
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.
media
styleSheet
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); };
cssText
getPropertyValue
propertyName |
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.
setProperty
propertyName |
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. |
DOMException
SYNTAX_ERR: Raised if the specified value has a syntax error and is unparsable.
length
item
index |
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; };
azimuth
background
backgroundAttachment
backgroundColor
backgroundImage
backgroundPosition
backgroundRepeat
border
borderCollapse
borderColor
borderSpacing
borderStyle
borderTop
borderRight
borderBottom
borderLeft
borderTopColor
borderRightColor
borderBottomColor
borderLeftColor
borderTopStyle
borderRightStyle
borderBottomStyle
borderLeftStyle
borderTopWidth
borderRightWidth
borderBottomWidth
borderLeftWidth
borderWidth
bottom
captionSide
clear
clip
color
content
counterIncrement
counterReset
cue
cueAfter
cueBefore
cursor
direction
display
elevation
emptyCells
cssFloat
font
fontFamily
fontSize
fontSizeAdjust
fontStretch
fontStyle
fontVariant
fontWeight
height
left
letterSpacing
lineHeight
listStyle
listStyleImage
listStylePosition
listStyleType
margin
marginTop
marginRight
marginBottom
marginLeft
markerOffset
marks
maxHeight
maxWidth
minHeight
minWidth
orphans
outline
outlineColor
outlineStyle
outlineWidth
overflow
padding
paddingTop
paddingRight
paddingBottom
paddingLeft
page
pageBreakAfter
pageBreakBefore
pageBreakInside
pause
pauseAfter
pauseBefore
pitch
pitchRange
playDuring
position
quotes
richness
right
size
speak
speakHeader
speakNumeral
speakPunctuation
speechRate
stress
tableLayout
textAlign
textDecoration
textIndent
textShadow
textTransform
top
unicodeBidi
verticalAlign
visibility
voiceFamily
volume
whiteSpace
widows
width
wordSpacing
zIndex
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.