<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- Generated: Thu Nov 09 17:44:50 EST 2000 jfouffa.w3.org --> <html lang='en' xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Document Object Model Style Sheets</title> <link rel='stylesheet' type='text/css' href='./spec.css' /> <link rel='stylesheet' type='text/css' href='W3C-REC.css' /> <link rel='next' href='css.html' /> <link rel='contents' href='Overview.html#contents' /> <link rel='index' href='def-index.html' /> <link rel='previous' href='copyright-notice.html' /> </head> <body> <div class='navbar' align='center'><a accesskey='p' href='copyright-notice.html'>previous</a> <a accesskey='n' href='css.html'>next</a> <a accesskey='c' href='Overview.html#contents'>contents</a> <a accesskey='i' href='def-index.html'>index</a> <hr title='Navigation area separator' /> </div> <div class='noprint' style='text-align: right'> <p style='font-family: monospace;font-size:small'>13 November, 2000</p> </div> <div class='div1'><a id="StyleSheets" name='StyleSheets'></a> <h1 id='StyleSheets-h1' class='div1'>1. Document Object Model Style Sheets</h1> <dl> <dt><i>Editors</i></dt> <dd>Chris Wilson, Microsoft Corp.</dd> <dd>Philippe Le Hégaret, W3C</dd> <dd>Vidur Apparao, Netscape Communications Corp.</dd> </dl> <div class='noprint'> <h2 id='table-of-contents'>Table of contents</h2> <ul class='toc'> <li class='tocline3'><a class='tocxref' href='#StyleSheets-overview'>1.1. Introduction</a></li> <li class='tocline3'><a class='tocxref' href='#StyleSheets-fundamental'>1.2. Style Sheet Interfaces</a> <ul class='toc'> <li class='tocline4'><a href='#StyleSheets-StyleSheet'>StyleSheet</a>, <a href='#StyleSheets-StyleSheetList'>StyleSheetList</a>, <a href='#StyleSheets-MediaList'>MediaList</a></li> </ul> </li> <li class='tocline3'><a class='tocxref' href='#StyleSheets-extensions'>1.3. Document Extensions</a> <ul class='toc'> <li class='tocline4'><a href='#StyleSheets-LinkStyle'>LinkStyle</a>, <a href='#StyleSheets-StyleSheet-DocumentStyle'>DocumentStyle</a></li> </ul> </li> <li class='tocline3'><a class='tocxref' href='#StyleSheets-Association'>1.4. Association between a style sheet and a document.</a></li> </ul> </div> <div class='div2'><a id="StyleSheets-overview" name='StyleSheets-overview'></a> <h2 id='StyleSheets-overview-h2' class='div2'>1.1. Introduction</h2> <p>The DOM Level 2 Style Sheet interfaces are base interfaces used to represent any type of style sheet. The expectation is that DOM modules that represent a specific style sheet language may contain interfaces that derive from these interfaces.</p> <p>The interfaces found within this section are not mandatory. A DOM application may use the <code>hasFeature(feature, version)</code> method of the <code>DOMImplementation</code> interface with parameter values "StyleSheets" and "2.0" (respectively) to determine whether or not this module is supported by the implementation. In order to fully support this module, an implementation must also support the "Core" feature defined defined in the DOM 2 Core specification [<a class='noxref' href='references.html#DOMCore'>DOM Level 2 Core</a>]. Please refer to additional information about <a href='http://www.w3.org/TR/DOM-Level-2-Core/introduction.html#ID-Conformance'> <em>conformance</em></a> in the DOM Level 2 Core specification [<a class='noxref' href='references.html#DOMCore'>DOM Level 2 Core</a>].</p> </div> <!-- div2 StyleSheets-overview --> <div class='div2'><a id="StyleSheets-fundamental" name='StyleSheets-fundamental'></a> <h2 id='StyleSheets-fundamental-h2' class='div2'>1.2. Style Sheet Interfaces</h2> <p>This set of interfaces represents the generic notion of style sheets.</p> <dl> <dt><b>Interface <i><a id="StyleSheets-StyleSheet" name='StyleSheets-StyleSheet'>StyleSheet</a></i></b> (introduced in <b class='since'>DOM Level 2</b>)</dt> <dd> <p>The <code>StyleSheet</code> 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 <a href='http://www.w3.org/TR/1998/REC-html40-19980424/struct/links.html#h-12.3'> <em>LINK</em></a> element, or an inline <a href='http://www.w3.org/TR/1998/REC-html40-19980424/present/styles.html#h-14.2.3'> <em>STYLE</em></a> element. In XML, this interface represents an external style sheet, included via a <a href='http://www.w3.org/1999/06/REC-xml-stylesheet-19990629'><em>style sheet processing instruction</em></a>.</p> <dl> <dt><br /> <b>IDL Definition</b></dt> <dd> <div class='idl-code'> <pre> // Introduced in DOM Level 2: interface StyleSheet { readonly attribute DOMString type; attribute boolean disabled; readonly attribute Node ownerNode; readonly attribute StyleSheet parentStyleSheet; readonly attribute DOMString href; readonly attribute DOMString title; readonly attribute MediaList media; }; </pre> </div> <br /> </dd> <dt><b>Attributes</b></dt> <dd> <dl> <dt><code class='attribute-name'><a id="StyleSheets-StyleSheet-disabled" name='StyleSheets-StyleSheet-disabled'>disabled</a></code> of type <code>boolean</code></dt> <dd><code>false</code> if the style sheet is applied to the document. <code>true</code> if it is not. Modifying this attribute may cause a new resolution of style for the document. A stylesheet only applies if both an appropriate medium definition is present and the disabled attribute is false. So, if the media doesn't apply to the current user agent, the <code>disabled</code> attribute is ignored.<br /> </dd> <dt><code class='attribute-name'><a id="StyleSheets-StyleSheet-href" name='StyleSheets-StyleSheet-href'>href</a></code> of type <code>DOMString</code>, readonly</dt> <dd>If the style sheet is a linked style sheet, the value of its attribute is its location. For inline style sheets, the value of this attribute is <code>null</code>. See the <a href='http://www.w3.org/TR/1998/REC-html40-19980424/struct/links.html#adef-href'> <em>href attribute definition</em></a> for the <code>LINK</code> element in HTML 4.0, and the href pseudo-attribute for the XML <a href='http://www.w3.org/1999/06/REC-xml-stylesheet-19990629/#The xml-stylesheet processing instruction'> <em>style sheet processing instruction</em></a>.<br /> </dd> <dt><code class='attribute-name'><a id="StyleSheets-StyleSheet-media" name='StyleSheets-StyleSheet-media'>media</a></code> of type <a href='stylesheets.html#StyleSheets-MediaList'><code>MediaList</code></a>, readonly</dt> <dd>The intended destination media for style information. The media is often specified in the <code>ownerNode</code>. If no media has been specified, the <a href='stylesheets.html#StyleSheets-MediaList'><code>MediaList</code></a> will be empty. See the <a href='http://www.w3.org/TR/1998/REC-html40-19980424/present/styles.html#adef-media'> <em>media attribute definition</em></a> for the <code>LINK</code> element in HTML 4.0, and the media pseudo-attribute for the XML <a href='http://www.w3.org/1999/06/REC-xml-stylesheet-19990629/#The xml-stylesheet processing instruction'> <em>style sheet processing instruction</em></a> . Modifying the media list may cause a change to the attribute <code>disabled</code>.<br /> </dd> <dt><code class='attribute-name'><a id="StyleSheets-StyleSheet-ownerNode" name='StyleSheets-StyleSheet-ownerNode'>ownerNode</a></code> of type <code>Node</code>, readonly</dt> <dd>The node that associates this style sheet with the document. For HTML, this may be the corresponding <code>LINK</code> or <code>STYLE</code> element. For XML, it may be the linking processing instruction. For style sheets that are included by other style sheets, the value of this attribute is <code>null</code>.<br /> </dd> <dt><code class='attribute-name'><a id="StyleSheets-StyleSheet-parentStyleSheet" name='StyleSheets-StyleSheet-parentStyleSheet'>parentStyleSheet</a></code> of type <a href='stylesheets.html#StyleSheets-StyleSheet'><code>StyleSheet</code></a>, readonly</dt> <dd>For style sheet languages that support the concept of style sheet inclusion, this attribute represents the including style sheet, if one exists. If the style sheet is a top-level style sheet, or the style sheet language does not support inclusion, the value of this attribute is <code>null</code>.<br /> </dd> <dt><code class='attribute-name'><a id="StyleSheets-StyleSheet-title" name='StyleSheets-StyleSheet-title'>title</a></code> of type <code>DOMString</code>, readonly</dt> <dd>The advisory title. The title is often specified in the <code>ownerNode</code>. See the <a href='http://www.w3.org/TR/1998/REC-html40-19980424/struct/global.html#adef-title'> <em>title attribute definition</em></a> for the <code>LINK</code> element in HTML 4.0, and the title pseudo-attribute for the XML <a href='http://www.w3.org/1999/06/REC-xml-stylesheet-19990629/#The xml-stylesheet processing instruction'> <em>style sheet processing instruction</em></a>.<br /> </dd> <dt><code class='attribute-name'><a id="StyleSheets-StyleSheet-type" name='StyleSheets-StyleSheet-type'>type</a></code> of type <code>DOMString</code>, readonly</dt> <dd>This specifies the style sheet language for this style sheet. The style sheet language is specified as a content type (e.g. "text/css"). The <a href='http://www.w3.org/TR/1998/REC-html40-19980424/types.html#type-content-type'> <em>content type</em></a> is often specified in the <code>ownerNode</code>. Also see the <a href='http://www.w3.org/TR/1998/REC-html40-19980424/struct/links.html#adef-type-A'> <em>type attribute definition</em></a> for the <code>LINK</code> element in HTML 4.0, and the type pseudo-attribute for the XML <a href='http://www.w3.org/1999/06/REC-xml-stylesheet-19990629'><em>style sheet processing instruction</em></a>.<br /> </dd> </dl> </dd> </dl> </dd> <dt><b>Interface <i><a id="StyleSheets-StyleSheetList" name='StyleSheets-StyleSheetList'>StyleSheetList</a></i></b> (introduced in <b class='since'>DOM Level 2</b>)</dt> <dd> <p>The <code>StyleSheetList</code> interface provides the abstraction of an ordered collection of style sheets.</p> <p>The items in the <code>StyleSheetList</code> are accessible via an integral index, starting from 0.</p> <dl> <dt><br /> <b>IDL Definition</b></dt> <dd> <div class='idl-code'> <pre> // Introduced in DOM Level 2: interface StyleSheetList { readonly attribute unsigned long length; StyleSheet item(in unsigned long index); }; </pre> </div> <br /> </dd> <dt><b>Attributes</b></dt> <dd> <dl> <dt><code class='attribute-name'><a id="StyleSheets-StyleSheetList-length" name='StyleSheets-StyleSheetList-length'>length</a></code> of type <code>unsigned long</code>, readonly</dt> <dd>The number of <a href='stylesheets.html#StyleSheets-StyleSheet'><code>StyleSheets</code></a> in the list. The range of valid child stylesheet indices is <code>0</code> to <code>length-1</code> inclusive.<br /> </dd> </dl> </dd> <dt><b>Methods</b></dt> <dd> <dl> <dt><code class='method-name'><a id="StyleSheets-StyleSheetList-item" name='StyleSheets-StyleSheetList-item'>item</a></code></dt> <dd> <div class='method'>Used to retrieve a style sheet by ordinal index. If index is greater than or equal to the number of style sheets in the list, this returns <code>null</code>. <div class='parameters'><b>Parameters</b> <div class='paramtable'> <dl> <dt><code class='parameter-name'>index</code> of type <code>unsigned long</code></dt> <dd>Index into the collection<br /> </dd> </dl> </div> </div> <!-- parameters --> <div class='return'><b>Return Value</b> <div class='returntable'> <table summary='Layout table: the first cell contains the type of the return value, the second contains a short description' border='0'> <tr> <td valign='top'> <p><a href='stylesheets.html#StyleSheets-StyleSheet'><code>StyleSheet</code></a></p> </td> <td> <p>The style sheet at the <code>index</code> position in the <code>StyleSheetList</code>, or <code>null</code> if that is not a valid index.</p> </td> </tr> </table> </div> </div> <!-- return --> <div><b>No Exceptions</b></div> </div> <!-- method --> </dd> </dl> </dd> </dl> </dd> <dt><b>Interface <i><a id="StyleSheets-MediaList" name='StyleSheets-MediaList'>MediaList</a></i></b> (introduced in <b class='since'>DOM Level 2</b>)</dt> <dd> <p>The <code>MediaList</code> interface provides the abstraction of an ordered collection of <a href='http://www.w3.org/TR/1998/REC-html40-19980424/types.html#h-6.13'> <em>media</em></a>, without defining or constraining how this collection is implemented. An empty list is the same as a list that contains the medium <code>"all"</code>.</p> <p>The items in the <code>MediaList</code> are accessible via an integral index, starting from 0.</p> <dl> <dt><br /> <b>IDL Definition</b></dt> <dd> <div class='idl-code'> <pre> // Introduced in DOM Level 2: interface MediaList { attribute DOMString mediaText; // raises(DOMException) on setting readonly attribute unsigned long length; DOMString item(in unsigned long index); void deleteMedium(in DOMString oldMedium) raises(DOMException); void appendMedium(in DOMString newMedium) raises(DOMException); }; </pre> </div> <br /> </dd> <dt><b>Attributes</b></dt> <dd> <dl> <dt><code class='attribute-name'><a id="StyleSheets-MediaList-length" name='StyleSheets-MediaList-length'>length</a></code> of type <code>unsigned long</code>, readonly</dt> <dd>The number of media in the list. The range of valid media is <code>0</code> to <code>length-1</code> inclusive.<br /> </dd> <dt><code class='attribute-name'><a id="StyleSheets-MediaList-mediaText" name='StyleSheets-MediaList-mediaText'>mediaText</a></code> of type <code>DOMString</code></dt> <dd>The parsable textual representation of the media list. This is a comma-separated list of media.<br /> <div class='exceptions'><b>Exceptions on setting</b> <div class='exceptiontable'> <table summary='Layout table: the first cell contains the type of the exception, the second contains the specific error code and a short description' border='0'> <tr> <td valign='top'> <p><code>DOMException</code></p> </td> <td> <p>SYNTAX_ERR: Raised if the specified string value has a syntax error and is unparsable.</p> <p>NO_MODIFICATION_ALLOWED_ERR: Raised if this media list is readonly.</p> </td> </tr> </table> </div> </div> <!-- exceptions --> </dd> </dl> </dd> <dt><b>Methods</b></dt> <dd> <dl> <dt><code class='method-name'><a id="StyleSheets-MediaList-appendMedium" name='StyleSheets-MediaList-appendMedium'>appendMedium</a></code></dt> <dd> <div class='method'>Adds the medium <code>newMedium</code> to the end of the list. If the <code>newMedium</code> is already used, it is first removed. <div class='parameters'><b>Parameters</b> <div class='paramtable'> <dl> <dt><code class='parameter-name'>newMedium</code> of type <code>DOMString</code></dt> <dd>The new medium to add.<br /> </dd> </dl> </div> </div> <!-- parameters --> <div class='exceptions'><b>Exceptions</b> <div class='exceptiontable'> <table summary='Layout table: the first cell contains the type of the exception, the second contains the specific error code and a short description' border='0'> <tr> <td valign='top'> <p><code>DOMException</code></p> </td> <td> <p>INVALID_CHARACTER_ERR: If the medium contains characters that are invalid in the underlying style language.</p> <p>NO_MODIFICATION_ALLOWED_ERR: Raised if this list is readonly.</p> </td> </tr> </table> </div> </div> <!-- exceptions --> <div><b>No Return Value</b></div> </div> <!-- method --> </dd> <dt><code class='method-name'><a id="StyleSheets-MediaList-deleteMedium" name='StyleSheets-MediaList-deleteMedium'>deleteMedium</a></code></dt> <dd> <div class='method'>Deletes the medium indicated by <code>oldMedium</code> from the list. <div class='parameters'><b>Parameters</b> <div class='paramtable'> <dl> <dt><code class='parameter-name'>oldMedium</code> of type <code>DOMString</code></dt> <dd>The medium to delete in the media list.<br /> </dd> </dl> </div> </div> <!-- parameters --> <div class='exceptions'><b>Exceptions</b> <div class='exceptiontable'> <table summary='Layout table: the first cell contains the type of the exception, the second contains the specific error code and a short description' border='0'> <tr> <td valign='top'> <p><code>DOMException</code></p> </td> <td> <p>NO_MODIFICATION_ALLOWED_ERR: Raised if this list is readonly.</p> <p>NOT_FOUND_ERR: Raised if <code>oldMedium</code> is not in the list.</p> </td> </tr> </table> </div> </div> <!-- exceptions --> <div><b>No Return Value</b></div> </div> <!-- method --> </dd> <dt><code class='method-name'><a id="StyleSheets-MediaList-item" name='StyleSheets-MediaList-item'>item</a></code></dt> <dd> <div class='method'>Returns the <code>index</code>th in the list. If <code>index</code> is greater than or equal to the number of media in the list, this returns <code>null</code>. <div class='parameters'><b>Parameters</b> <div class='paramtable'> <dl> <dt><code class='parameter-name'>index</code> of type <code>unsigned long</code></dt> <dd>Index into the collection.<br /> </dd> </dl> </div> </div> <!-- parameters --> <div class='return'><b>Return Value</b> <div class='returntable'> <table summary='Layout table: the first cell contains the type of the return value, the second contains a short description' border='0'> <tr> <td valign='top'> <p><code>DOMString</code></p> </td> <td> <p>The medium at the <code>index</code>th position in the <code>MediaList</code>, or <code>null</code> if that is not a valid index.</p> </td> </tr> </table> </div> </div> <!-- return --> <div><b>No Exceptions</b></div> </div> <!-- method --> </dd> </dl> </dd> </dl> </dd> </dl> </div> <!-- div2 StyleSheets-fundamental --> <div class='div2'><a id="StyleSheets-extensions" name='StyleSheets-extensions'></a> <h2 id='StyleSheets-extensions-h2' class='div2'>1.3. Document Extensions</h2> <dl> <dt><b>Interface <i><a id="StyleSheets-LinkStyle" name='StyleSheets-LinkStyle'>LinkStyle</a></i></b> (introduced in <b class='since'>DOM Level 2</b>)</dt> <dd> <p>The <code>LinkStyle</code> interface provides a mechanism by which a style sheet can be retrieved from the node responsible for linking it into a document. An instance of the <code>LinkStyle</code> interface can be obtained using binding-specific casting methods on an instance of a linking node (<code>HTMLLinkElement</code>, <code>HTMLStyleElement</code> or <code>ProcessingInstruction</code> in DOM Level 2).</p> <dl> <dt><br /> <b>IDL Definition</b></dt> <dd> <div class='idl-code'> <pre> // Introduced in DOM Level 2: interface LinkStyle { readonly attribute StyleSheet sheet; }; </pre> </div> <br /> </dd> <dt><b>Attributes</b></dt> <dd> <dl> <dt><code class='attribute-name'><a id="StyleSheets-LinkStyle-sheet" name='StyleSheets-LinkStyle-sheet'>sheet</a></code> of type <a href='stylesheets.html#StyleSheets-StyleSheet'><code>StyleSheet</code></a>, readonly</dt> <dd>The style sheet.<br /> </dd> </dl> </dd> </dl> </dd> <dt><b>Interface <i><a id="StyleSheets-StyleSheet-DocumentStyle" name='StyleSheets-StyleSheet-DocumentStyle'>DocumentStyle</a></i></b> (introduced in <b class='since'>DOM Level 2</b>)</dt> <dd> <p>The <code>DocumentStyle</code> interface provides a mechanism by which the style sheets embedded in a document can be retrieved. The expectation is that an instance of the <code>DocumentStyle</code> interface can be obtained by using binding-specific casting methods on an instance of the <code>Document</code> interface.</p> <dl> <dt><br /> <b>IDL Definition</b></dt> <dd> <div class='idl-code'> <pre> // Introduced in DOM Level 2: interface DocumentStyle { readonly attribute StyleSheetList styleSheets; }; </pre> </div> <br /> </dd> <dt><b>Attributes</b></dt> <dd> <dl> <dt><code class='attribute-name'><a id="StyleSheets-DocumentStyle-styleSheets" name='StyleSheets-DocumentStyle-styleSheets'>styleSheets</a></code> of type <a href='stylesheets.html#StyleSheets-StyleSheetList'><code>StyleSheetList</code></a>, readonly</dt> <dd>A list containing all the style sheets explicitly linked into or embedded in a document. For HTML documents, this includes external style sheets, included via the HTML <a href='http://www.w3.org/TR/1998/REC-html40-19980424/struct/links.html#h-12.3'> <em>LINK</em></a> element, and inline <a href='http://www.w3.org/TR/1998/REC-html40-19980424/present/styles.html#h-14.2.3'> <em>STYLE</em></a> elements. In XML, this includes external style sheets, included via style sheet processing instructions (see [<a class='noxref' href='references.html#XML-StyleSheet'>XML-StyleSheet</a>]).<br /> </dd> </dl> </dd> </dl> </dd> </dl> </div> <!-- div2 StyleSheets-extensions --> <div class='div2'><a id="StyleSheets-Association" name='StyleSheets-Association'></a> <h2 id='StyleSheets-Association-h2' class='div2'>1.4. Association between a style sheet and a document.</h2> <dl> <dt><b>HTML and Style Sheet Creation</b></dt> <dd>A style sheet can be associated with an HTMLDocument in one of two ways: <ul> <li>By creating a new LINK HTML element (see the <code>HTMLLinkElement</code> interface in the [<a class='noxref' href='references.html#DOMHTML-inf'>DOM Level 2 HTML</a>] and [<a class='noxref' href='references.html#HTML40'>HTML4.0</a>]). The underlying style sheet will be created after the element is inserted into the document and both the href and the type attribute have been set in a way indicating that the linked object is a style sheet.</li> <li>By creating a new STYLE HTML element (see the <code>HTMLStyleElement</code> interface in the [<a class='noxref' href='references.html#DOMHTML-inf'>DOM Level 2 HTML</a>] and [<a class='noxref' href='references.html#HTML40'>HTML4.0</a>]). The underlying style sheet will be created after the element is inserted into the document and the type attribute is set in a way indicating that the element corresponds to a style sheet language interpreted by the user agent.</li> </ul> </dd> <dt><b>HTML and Style Sheet Removal</b></dt> <dd>Removing a LINK HTML element or a STYLE HTML element removes the underlying style sheet from the style sheet collection associated with a document. Specifically, the removed style sheet is no longer applied to the presentation of the document.</dd> <dt><b>XML and Style Sheet Creation</b></dt> <dd>A new style sheet can be created and associated with an XML document by creating a processing instruction with the target 'xml-stylesheet' [<a class='noxref' href='references.html#XML-StyleSheet'>XML-StyleSheet</a>] and inserting it into the document.</dd> <dt><b>XML and Style Sheet Removal</b></dt> <dd>Removing a processing instruction with a target of 'xml-stylesheet' [<a class='noxref' href='references.html#XML-StyleSheet'>XML-StyleSheet</a>] removes the underlying style sheet from the style sheet collection associated with a document. Specifically, the removed style sheet is no longer applied to the presentation of the document.</dd> </dl> </div> <!-- div2 StyleSheets-Association --></div> <!-- div1 StyleSheets --> <div class='navbar' align='center'> <hr title='Navigation area separator' /> <a accesskey='p' href='copyright-notice.html'>previous</a> <a accesskey='n' href='css.html'>next</a> <a accesskey='c' href='Overview.html#contents'>contents</a> <a accesskey='i' href='def-index.html'>index</a></div> </body> </html>