Style Sheets

DOM2 的 StyleSheets 是任何类型样式表的基础类。期望表示特定样式表语言的DOM模块可能包含从这些接口派生出新的接口。

本节中的接口不是必须的。DOM 应用程序可以使用 DOMImplement 接口的 hasFeature （feature， version）方法，参数值 "StyleSheets" 和 "2.0" 来确定实现是否支持该模块。 为了完全的支持这些模块，一个实现还必须支持 DOM 2 核心规范中定义的 ”核心“ 功能。 请参阅DOM Level 2 Core规范[DOM Level 2 Core]中有关一致性的其他信息。

StyleSheet 接口

StyleSheet 是任何类型样式表的基类。它表示与结构化文档关联的单个样式表。在 HTML 中， StyleSheet 表示通过 HTML link 元素保护的外部样式表或内联 style 元素。

IDL Definition

// 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;
};
复制代码

Attributes：

1. disabled（boolean）

如果值为 false 则样式表被应用了，反之，不是。修改此属性，会使当前的 css 被应用或取消， 而且需要符合当前 media 类型。

2. href（DOMString，readonly）

如果是通过 link 外部引入的样式表，那值就是外部的链接地址。 对于内联的样式表， 此属性的值是 null。href定义

3. 类型为 MediaList 的 media （readonly）

样式信息的预期目标媒体。 media 通常在 ownerNode 中指定。如果未指定媒体，则 MediaList 将为空。

4. 类型为 NODE 的 ownerNode （readonly）

将此样式表与文档关联的节点。对于 HTML， 这可能是相应的 Link 或 STYLE 元素。

5. 类型为 StyleSheet 的 parentStyleSheet （readonly

对于支持样式表包含概念的样式表语言，此属性表示包含样式（如果存在）。如果样式表是顶级样式表，或者样式表语言不支持包含， 则此属性的值为 null。

6. 类型为 DOMString 的 title （readonly）

咨询标题。 标题通常在 ownerNode 中指定。

7. 类型为 DOMString 的 type （readonly）

这指定了此样式表的样式表语言。样式表语言被指定为内容类型(例如 "text/css")。 内容类型通常在 ownerNode 中指定。

StyleSheetList

StyleSheetList 提供了有序的样式集合。可以通过索引访问每个值。

IDL Definition

// Introduced in DOM Level 2:
    interface StyleSheetList {
      readonly attribute unsigned long    length;
      StyleSheet         item(in unsigned long index);
    };
复制代码

Attributes

1. length （readonly）

StyleSheetList 对象内所有数据的长度。

Methods

1. item

参数为索引，返回当前索引的值。

MediaList

MediaList 接口提供有序 media 集合 抽象列表，没有定义或强制这个集合怎样实现。 一个空的列表代表媒体类型是 “all”。

可通过索引访问值。

IDL Definition

// 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);
    };
复制代码

Attributes

1. length (readonly)

   媒体类型的总长度， 索引从 0 到 length - 1

2. 类型为 DOMString 的 mediaText

   媒体列表的可解析文本表示。 这是一个以逗号分隔的媒体列表

   2.1 设置中的错误

   SYNTAX_ERR：如果指定的字符串值有语法错误且不可解析，则引发此异常。

   NO_MODIFICATION_ALLOWED_ERR：如果此媒体列表是只读的，则引发此问题。

Methods：

appendMedium： 添加一个新的媒体类型

deleteMedium： 删除一个媒体类型

item： 返回当前索引的值。

document 扩展

LinkStyle

LinkStyle 提供了一种机制，通过该机制可以从负责将其链接到文档的节点中检索样式表。LinkStyle 实例可以通过特定于绑定的转换方法在 linking node 的实例上获得。

可以使用链接节点实例上的特定于绑定的转换方法获取 LinkStyle 接口的实例。

IDL Definition

// Introduced in DOM Level 2:
interface LinkStyle {
  readonly attribute StyleSheet       sheet;
};
复制代码

Attributes

sheet of type StyleSheet, (readonly)

DocumentStyle

DocumentStyle 提供了一种机制，通过该机制可以检索文档中嵌入的样式表。 期望通过在 document 接口的实例使用特定于绑定的转换方法来获取 DocumentStyle 接口的实例。

IDL Definition

// Introduced in DOM Level 2:

interface DocumentStyle {
  readonly attribute StyleSheetList   styleSheets;
};
复制代码

Attributes styleSheets of type StyleSheetList, readonly

包含显式链接到文档或嵌入到文档中的所有样式表的列表。对于HTML文档，这包括通过HTML LINK元素包含的外部样式表和内联STYLE元素

样式表和文档之间的关联

• HTML 和 样式表的创建

样式表可以通过以下两种方法之一与 HTMLDocument 关联：

1. 通过创建新的LINK HTML元素。在将元素插入到文档中之后将创建基础样式表，并且href和type属性都已设置为指示链接对象是样式表的方式。

2. 通过创建新的STYLE HTML元素。在将元素插入到文档中之后将创建基础样式表，并且以指示该元素对应于由用户代理解释的样式表语言的方式设置type属性。

• HTML和样式表删除

删除LINK HTML元素或STYLE HTML元素会从与文档关联的样式表集合中删除基础样式表。具体而言，删除的样式表不再应用于文档的表示。

小结

document.styleSheet.__proto__ = StyleSheetList.prototype

document.styleSheet[0].__proto__ = CSSStyleSheet.prototype

document.styleSheet[0].__proto__.__proto__ = StyleSheet.prototype