Style Sheets1
概况
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:
- disabled(boolean)
如果值为 false 则样式表被应用了,反之,不是。修改此属性,会使当前的 css 被应用或取消, 而且需要符合当前 media 类型。
- href(DOMString,readonly)
如果是通过 link 外部引入的样式表,那值就是外部的链接地址。 对于内联的样式表, 此属性的值是 null。 href定义
- 类型为 MediaList 的 media (readonly)
样式信息的预期目标媒体。 media 通常在 ownerNode 中指定。如果未指定媒体,则 MediaList 将为空。
- 类型为 NODE 的 ownerNode (readonly)
将此样式表与文档关联的节点。对于 HTML, 这可能是相应的 Link 或 STYLE 元素。
- 类型为 StyleSheet 的 parentStyleSheet (readonly
对于支持样式表包含概念的样式表语言,此属性表示包含样式(如果存在)。如果样式表是顶级样式表,或者样式表语言不支持包含, 则此属性的值为 null。
- 类型为 DOMString 的 title (readonly)
咨询标题。 标题通常在 ownerNode 中指定。
- 类型为 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
- length (readonly)
StyleSheetList 对象内所有数据的长度。
Methods
- 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
-
length (readonly)
媒体类型的总长度, 索引从 0 到 length - 1
-
类型为 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 关联:
-
通过创建新的LINK HTML元素。在将元素插入到文档中之后将创建基础样式表,并且href和type属性都已设置为指示链接对象是样式表的方式。
-
通过创建新的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
Style Sheets2
总览 DOM2 级 CSS 接口
DOM Level 2级联样式表(CSS)接口的设计目标是将CSS构造公开给对象模型使用者。CSS 是一种声明示语法,用于定义用于格式化和呈现 Web 文档的表示规则,属性和辅助结构。本文档指定了一种以编程方式访问和修改CSS提供的丰富样式和表示控件的机制(特别是 CSS2)。 这通过提供一组机制来动态控制各个样式表的包含和排除,以及操纵 CSS 规则和属性来增强 CSS。
这个 CSS 接口以逻辑结构而非物理结构组织。集合内的 CSS 可以引用或者植入到文档中并且在 document 中是可访问的。在集合中的每项暴露了 HTMl 和 XML 文档中引用或嵌入的所有样式表的共有的属性。 通过这个集合用户样式表不是可访问的,部分是由于潜在的隐私问题 (当然还有读写问题)。
对于每个 CSS 样式表,CSSStyleSheet
接口将会额外的暴露出来。 这个接口允许访问 CSS 样式表中规则集合以及修改该集合的方法。 接口为每个特定的CSS2规则类型(例如:样式声明, @import 规则, @font-face 规则)提供接口,共享通用的 CSSRule
接口。
最常见的规则类型是样式声明。表示此类规则类型的 CSSStyleRule
接口提供字符串访问规则的 CSS 选择器,并且通过 CSSStyleDeclaration
访问属性声明。
最后,描述了一个可选的 CSS2Properties 接口;此接口(如果已实现)提供 CSS2 中所有属性的字符串值的快捷方式。
在 DOM 里所有 CSS 对象都是实时的,也就是说,样式表中的更改会反映在技术和实际样式中。
CSS 基本接口
本节中的接口被认为是基本的 CSS 接口, 并且必须得到 CSS 模块的所有符合实现的支持。
一个 DOM 应用程序可以使用 DOMImplementation接口的 hasFeature 方法,并使用参数为 "CSS" 和 "2.0" 来确定该模块是否受实现支持。为了完全的支持这个模块, 实现也必须支持 DOM2 Core 规范中定义的 Core 特性和 DOM2 Views 规范中定义的 ”Views“ 特性。请参与 DOM2 Core 规范中有关一致性的其他信息。
CSSStyleSheet
CSSStyleSheet 接口是一个用于表示 CSS样式表的具体接口,即内容类型为 ”text/css“ 的样式表。
IDL Definition
// Introduced in DOM Level 2:
interface CSSStyleSheet : stylesheets::StyleSheet {
readonly attribute CSSRule ownerRule;
readonly attribute CSSRuleList cssRules;
unsigned long insertRule(in DOMString rule,
in unsigned long index)
raises(DOMException);
void deleteRule(in unsigned long index)
raises(DOMException);
};
复制代码
Attributes
- 类型为 CSSRuleLIst 的 cssRules (只读)
在样式表中包含了所有 CSS 规则列表。这包括 规则集 和 at规则
规则集
P[example="public class foo\
{\
private int x;\
\
foo(int x) {\
this.x = x;\
}\
\
}"] { color: red }
复制代码
at 规则
@import "subs.css";
H1 { color:'blue' }
复制代码
- 类型为 CSSRule 的 ownerRule (只读)
如果这个样式是通过 @import 引入的, 那么 ownerRule 属性将包含 CSSImportRule。 同样的 ownerNode 属性将会为 null。如果样式表来自元素或者处理指令,则 ownerRule 属性将会是 null,并且 ownerNode 属性将会是包含 Node。
Methods
- deleteRule
从样式表中删除规则
- insertRule
向样式表中插入一条规则
CSSRuleList
CSSRuleList 提供 CSS 规则的有序集合的抽象列表。可以通过索引访问。
IDL Definition
// Introduced in DOM Level 2:
interface CSSRuleList {
readonly attribute unsigned long length;
CSSRule item(in unsigned long index);
};
复制代码
Attributes
- length
Methods
- item
CSSRule
CSSRule 接口是任何类型的 CSS 语句的抽象基接口。这包含了 规则集 和 at规则。预期实现将保留 CSS 样式表中指定的所有规则,即使解析器无法识别该规则也是如此。CSSUnknownRule 表示无法识别的规则。
IDL Definition
// Introduced in DOM Level 2:
interface CSSRule {
// RuleType
const unsigned short UNKNOWN_RULE = 0;
const unsigned short STYLE_RULE = 1;
const unsigned short CHARSET_RULE = 2;
const unsigned short IMPORT_RULE = 3;
const unsigned short MEDIA_RULE = 4;
const unsigned short FONT_FACE_RULE = 5;
const unsigned short PAGE_RULE = 6;
readonly attribute unsigned short type;
attribute DOMString cssText;
// raises(DOMException) on setting
readonly attribute CSSStyleSheet parentStyleSheet;
readonly attribute CSSRule parentRule;
};
复制代码
定义组RuleType
一个整型,代表这是哪种类型的规则
定义的常量
-
CHARSET_RULE The rule is a CSSCharsetRule.
-
FONT_FACE_RULE The rule is a CSSFontFaceRule.
-
IMPORT_RULE The rule is a CSSImportRule.
-
MEDIA_RULE The rule is a CSSMediaRule.
-
PAGE_RULE The rule is a CSSPageRule.
-
STYLE_RULE The rule is a CSSStyleRule.
-
UNKNOWN_RULE The rule is a CSSUnknownRule.
Attributes
- 类型为 DOMString 的 CSSText
规则的可解析文本表示。 这反映了规则的当前状态而不使其初始值。
- 类型为 CSSRule 的 parentRule (只读)
如果这个规则包含在另外一个之内 (如:在 @media 中样式规则),这是包含的规则,如果这个规则不使嵌套在其他规则中, 这个值为 null
- 类型为 CSSStyleSheet 的 parentStyleSheet (只读)
包含这个规则的样式表
- type (只读)
规则的类型,如上所述。期望绑定特定的转换方法可以用于从 CSSRule 接口的实例转换为该类型隐含的特定派生接口。
CSSStyleRule
CSSStyleSheet 表示一个单一的规则集
IDL Definition
// Introduced in DOM Level 2:
interface CSSStyleRule : CSSRule {
attribute DOMString selectorText;
// raises(DOMException) on setting
readonly attribute CSSStyleDeclaration style;
};
复制代码
Attributes
- 类型为 DOMString 的 selectorText
规则集的选择器的文本表示。 实现可能在解析选择器时剥离了无关紧要的空格
- 类型为 CSSStyleDeclaration 的 style (只读)
这个规则集合的声明块
CSSMediaRule
CSSMediaRule 代码 @media 规则, @media 可以为每个特定的媒体类型设置样式规则
IDL Definition
// Introduced in DOM Level 2:
interface CSSMediaRule : CSSRule {
readonly attribute stylesheets::MediaList media;
readonly attribute CSSRuleList cssRules;
unsigned long insertRule(in DOMString rule,
in unsigned long index)
raises(DOMException);
void deleteRule(in unsigned long index)
raises(DOMException);
};
复制代码
Methods
- deleteRule
从 media 块中删除规则
- insertRule
从 media 块中插入新规则
CSSFontFaceRule
CSSFontFaceRule 代表 @font-face 规则
IDL Definition
// Introduced in DOM Level 2:
interface CSSFontFaceRule : CSSRule {
readonly attribute CSSStyleDeclaration style;
};
复制代码
Attributes
- CSSStyleDeclaration 类的 style (只读)
这个规则的声明块
CSSPageRule
CSSPageRule 接口表示 CSS 样式表中的页面规则。 页面规则用于指定 @page 的页面框的 尺寸, 方向,边距等。
IDL Definition
// Introduced in DOM Level 2:
interface CSSPageRule : CSSRule {
attribute DOMString selectorText;
// raises(DOMException) on setting
readonly attribute CSSStyleDeclaration style;
};
复制代码
Attributes
- 类型为 DOMString 的 selectorText
表示 page 选择器的可解析文本表示
- 类型为 CSSStyleDeclaration 的 style (只读)
CSSImportRule
@import 规则,用于引入其他规则到当前样式表
IDL Definition
// Introduced in DOM Level 2:
interface CSSImportRule : CSSRule {
readonly attribute DOMString href;
readonly attribute stylesheets::MediaList media;
readonly attribute CSSStyleSheet styleSheet;
};
复制代码
Attributes
- 类型为 DOMString 的 href (只读)
要导入的样式表的位置。该属性不包含 URI 周围的 url 说明符。
- 类型为 MediaList 的 media (只读)
可以使用此样式表的媒体类型列表
- 类型为 CSSStyleSheet 的 styleSheet (只读)
此规则引用的样式表 (如果已加载)。如果尚未加载样式表或者不加载样式表,则此属性的值为 null (例如,如果样式表是针对用户代理不支持的媒体类型)
CSSCharsetRule
CSSCharsetRule 代表 @charset 规则, encoding 属性的值不会影响 DOM 对象中文本数据的编码;编码方式总是 UTF-16。在 样式表载入后,encoding 属性的值在 @charset 规则中是一个值。如果没有 @charset 在原文档,将不会有 CSSCharsetRule 被创建。encoding 属性的值也可以用作样式表序列号所使用的编码的提示。
@charset 规则(以及 CSSCharsetRule)的值可能与文档实际进入的编码不对应;字符编码信息,例如在 HTTP 表头中,具有优先级,但是这不会反映在 CSSCharsetRule 中。
IDL Definition
// Introduced in DOM Level 2:
interface CSSCharsetRule : CSSRule {
attribute DOMString encoding;
// raises(DOMException) on setting
};
复制代码
Attributes
- 类型为 DOMSting 的 encoding
在 @charset 规则中使用的编码信息
CSSUnknownRule
CSSUnknownRule 表示当前用户代理不支持 at 规则
IDL Definition
// Introduced in DOM Level 2:
interface CSSUnknownRule : CSSRule {
};
复制代码
CSSStyleDeclaration
CSSStyleDeclaration 表示单个 CSS 声明块。 此接口可用于确定当前在块中设置的样式属性,或在块中显式设置样式属性。
在 CSS 声明块中,如果一个实现不能编译所有 CSS 属性, 则可以通过 CSSStyleDeclaration 接口能够访问所有特定属性, 此外,支持特定级别 CSS 的 实现应该正确处理该级别的 CSS 速记属性(类似 background)。为了进一步讨论速记属性, 可以查看 CSS2Properties 接口。
Note:CSS 对象模型不提供对 CSS 级联的指定值或实际值的访问。
IDL Definition
// Introduced in DOM Level 2:
interface CSSStyleDeclaration {
attribute DOMString cssText;
// raises(DOMException) on setting
DOMString getPropertyValue(in DOMString propertyName);
CSSValue getPropertyCSSValue(in DOMString propertyName);
DOMString removeProperty(in DOMString propertyName)
raises(DOMException);
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);
readonly attribute CSSRule parentRule;
};
复制代码
Attributes:
- 类型为 DOMString 的 cssText
声明块的可解析文本表示 (不包括周围的花括号)。设置这个属性将会导致编译新的值,而且还会重新设置所有属性包括删除或者添加的属性。
-
length (只读)
-
类型为 CSSRule 的 parentRule (只读)
包含此声明块的 CSS 规则,如果此 CSSStyleDeclaration 未附加到 CSSRule, 则返回 null。
Methods:
- getPropertyCSSValue
用于检索 CSS 属性值的对象表示 (如果已在此声明块中显示设置), 如果属性是缩写的则返回 null。速记属性值只能通过 getPropertyValue 和 setProperty 方法访问和参数作为字符串修改。
@param propertyName css的属性名
- getPropertyPriority
用于检测 CSS 属性的优先级 (例如: @important), 如果已在此声明块中显示设置该属性。
- getPropertyValue
@param propertyName css的属性名
- item
用于检索已在此声明块中显式设置的属性。使用此方法检索的属性的顺序不必是它们的设置顺序。此方法可用于迭代此声明块中的所有属性。 参数
- removeProperty
移除一个 css 属性
- setProperty
设置 css 属性值 和 优先权
CSSValue
CSSValue 表示一个简单的或复杂的值。 CSSValue 对象发生在 css 属性上下文。
IDL Definition
// Introduced in DOM Level 2:
interface CSSValue {
// UnitTypes
const unsigned short CSS_INHERIT = 0;
const unsigned short CSS_PRIMITIVE_VALUE = 1;
const unsigned short CSS_VALUE_LIST = 2;
const unsigned short CSS_CUSTOM = 3;
attribute DOMString cssText;
// raises(DOMException) on setting
readonly attribute unsigned short cssValueType;
};
复制代码
定义一组单位类型:
一个整数,指示哪种类型的单位适用于该值。
Defined Constants
CSS_CUSTOM
The value is a custom value.
CSS_INHERIT
The value is inherited and the cssText contains "inherit".
CSS_PRIMITIVE_VALUE
该值是原始值,并且可以通过在此CSSValue接口实例上使用特定于绑定的转换方法来获取CSSPrimitiveValue接口的实例。
CSS_VALUE_LIST
该值是CSSValue列表,并且可以通过在此CSSValue接口实例上使用特定于绑定的转换方法来获取CSSValueList接口的实例。
复制代码
Attributes:
- 类型为 DOMString 的 cssText
当前值的字符串表示形式
- cssValueType (只读)
定义上面定义的值类型的代码。
CSSPrimitiveValue
CSSPrimitiveValue 表示单个 CSS 值。这接口可以用于确定当前在块中设置的特定样式属性的值或在块内显示特定样式属性。这个实例可以从 CSSStyleDeclaration 的 getPropertyCSSValue 方法获得。 CSSPrimitiveValue 对象只能出现在 CSS 属性的上下文中。
允许在绝对值之间进行转换 (从毫米到厘米, 从度到弧度, 以此类推),但不允许在相对值之间进行转换。(例如, 像素值无法转换为厘米值。)百分百值无法被转换,因为它们相对于父值 (或其他属性值)。颜色百分比值有一个例外:由于颜色百分比相对于 0-255 的范围, 颜色百分比值可以被转换为数字。
IDL Definition
// Introduced in DOM Level 2:
interface CSSPrimitiveValue : CSSValue {
// UnitTypes
const unsigned short CSS_UNKNOWN = 0;
const unsigned short CSS_NUMBER = 1;
const unsigned short CSS_PERCENTAGE = 2;
const unsigned short CSS_EMS = 3;
const unsigned short CSS_EXS = 4;
const unsigned short CSS_PX = 5;
const unsigned short CSS_CM = 6;
const unsigned short CSS_MM = 7;
const unsigned short CSS_IN = 8;
const unsigned short CSS_PT = 9;
const unsigned short CSS_PC = 10;
const unsigned short CSS_DEG = 11;
const unsigned short CSS_RAD = 12;
const unsigned short CSS_GRAD = 13;
const unsigned short CSS_MS = 14;
const unsigned short CSS_S = 15;
const unsigned short CSS_HZ = 16;
const unsigned short CSS_KHZ = 17;
const unsigned short CSS_DIMENSION = 18;
const unsigned short CSS_STRING = 19;
const unsigned short CSS_URI = 20;
const unsigned short CSS_IDENT = 21;
const unsigned short CSS_ATTR = 22;
const unsigned short CSS_COUNTER = 23;
const unsigned short CSS_RECT = 24;
const unsigned short CSS_RGBCOLOR = 25;
readonly attribute unsigned short primitiveType;
void setFloatValue(in unsigned short unitType,
in float floatValue)
raises(DOMException);
float getFloatValue(in unsigned short unitType)
raises(DOMException);
void setStringValue(in unsigned short stringType,
in DOMString stringValue)
raises(DOMException);
DOMString getStringValue()
raises(DOMException);
Counter getCounterValue()
raises(DOMException);
Rect getRectValue()
raises(DOMException);
RGBColor getRGBColorValue()
raises(DOMException);
};
复制代码
定义一组单位类型
一个整数,指示哪种类型的单位适应于该值。
定义的常量
-
CSS_ATTR The value is a attribute function. The value can be obtained by using the getStringValue method.
-
CSS_CM The value is a length (cm). The value can be obtained by using the getFloatValue method.
-
CSS_COUNTER The value is a counter or counters function. The value can be obtained by using the getCounterValue method.
-
CSS_DEG The value is an angle (deg). The value can be obtained by using the getFloatValue method.
-
CSS_DIMENSION The value is a number with an unknown dimension. The value can be obtained by using the getFloatValue method.
-
CSS_EMS The value is a length (ems). The value can be obtained by using the getFloatValue method.
-
CSS_EXS The value is a length (exs). The value can be obtained by using the getFloatValue method.
-
CSS_GRAD The value is an angle (grad). The value can be obtained by using the getFloatValue method.
-
CSS_HZ The value is a frequency (Hz). The value can be obtained by using the getFloatValue method.
-
CSS_IDENT The value is an identifier. The value can be obtained by using the getStringValue method.
-
CSS_IN The value is a length (in). The value can be obtained by using the getFloatValue method.
-
CSS_KHZ The value is a frequency (kHz). The value can be obtained by using the getFloatValue method.
-
CSS_MM The value is a length (mm). The value can be obtained by using the getFloatValue method.
-
CSS_MS The value is a time (ms). The value can be obtained by using the getFloatValue method.
-
CSS_NUMBER The value is a simple number. The value can be obtained by using the getFloatValue method.
-
CSS_PC The value is a length (pc). The value can be obtained by using the getFloatValue method.
-
CSS_PERCENTAGE The value is a percentage. The value can be obtained by using the getFloatValue method.
-
CSS_PT The value is a length (pt). The value can be obtained by using the getFloatValue method.
-
CSS_PX The value is a length (px). The value can be obtained by using the getFloatValue method.
-
CSS_RAD The value is an angle (rad). The value can be obtained by using the getFloatValue method.
-
CSS_RECT The value is a rect function. The value can be obtained by using the getRectValue method.
-
CSS_RGBCOLOR The value is a RGB color. The value can be obtained by using the getRGBColorValue method.
-
CSS_S The value is a time (s). The value can be obtained by using the getFloatValue method.
-
CSS_STRING The value is a STRING. The value can be obtained by using the getStringValue method.
-
CSS_UNKNOWN The value is not a recognized CSS2 value. The value can only be obtained by using the cssText attribute.
-
CSS_URI The value is a URI. The value can be obtained by using the getStringValue method.
Attribute:
primitiveType (只读)
Methods:
- getCounterValue
- getFloatValue
- getRGBColorValue
- getRectValue
- getStringValue
- setFloatValue
- setStringValue
CSSValueList
CSSValueList接口提供CSS值的有序集合的抽象。
某些属性允许将空列表放入其语法中。在这种情况下,这些属性采用none标识符。因此,空列表意味着该属性的值为none。
CSSValueList中的项目可通过整数索引访问,从0开始。
IDL Definition
// Introduced in DOM Level 2:
interface CSSValueList : CSSValue {
readonly attribute unsigned long length;
CSSValue item(in unsigned long index);
};
复制代码
RGBColor
RGBColor接口用于表示任何RGB颜色值。此接口反映基础样式属性中的值。因此,对CSSPrimitiveValue对象所做的修改会修改样式属性。
不会剪切指定的RGB颜色(即使该数字超出范围0-255或0%-100%)。计算的RGB颜色将根据设备进行裁剪。
即使样式表只能包含颜色值的整数,此整数的内部存储也是浮点数,并且可以在指定的或作为浮点数使用计算出的样式。
IDL Definition
// Introduced in DOM Level 2:
interface RGBColor {
readonly attribute CSSPrimitiveValue red;
readonly attribute CSSPrimitiveValue green;
readonly attribute CSSPrimitiveValue blue;
};
复制代码
Rect
Rect接口用于表示任何rect值。此接口反映基础样式属性中的值。因此,对CSSPrimitiveValue对象所做的修改会修改style属性。
IDL Definition
// Introduced in DOM Level 2:
interface Rect {
readonly attribute CSSPrimitiveValue top;
readonly attribute CSSPrimitiveValue right;
readonly attribute CSSPrimitiveValue bottom;
readonly attribute CSSPrimitiveValue left;
};
复制代码
Counter
Counter接口用于表示任何计数器或计数器功能值。此接口反映基础样式属性中的值。
ViewCSS
此接口表示CSS视图。该 getComputedStyle方法提供对元素的计算值的只读访问。
期望通过在ViewCSS 接口的实例上使用特定于绑定的转换方法来获得接口的实例AbstractView。
由于计算样式与Element 节点相关,因此如果从文档中删除此元素,则 与此声明关联 CSSStyleDeclaration 且CSSValue相关的不再有效。
//在DOM Level 2中引入:
接口ViewCSS:views :: AbstractView {
CSSStyleDeclaration getComputedStyle(在Element elt中,
在DOMString pseudoElt);
};
复制代码
Methods:
- getComputedStyle
DocumentCSS
getOverrideStyle方法提供了一种机制,通过该机制,DOM作者可以立即更改元素的样式,而无需修改文档的显式链接样式表或样式表中元素的内联样式。此样式表位于级联算法中的作者样式表之后,称为覆盖样式表。覆盖样式表优先于作者样式表。 '!important'声明仍然优先于正常声明。覆盖,作者和用户样式表都可以包含“!important”声明。用户'!important'规则优先于override和!'important'规则,覆盖'!important'规则优先于作者'!important'规则。
期望通过在Document接口的实例上使用特定于绑定的转换方法来获取DocumentCSS接口的实例。
IDL Definition
// Introduced in DOM Level 2:
interface DocumentCSS : stylesheets::DocumentStyle {
CSSStyleDeclaration getOverrideStyle(in Element elt,
in DOMString pseudoElt);
};
复制代码
Methods:
- getOverrideStyle
此方法用于检索指定元素的指定伪元素的覆盖样式声明
DOMImplementationCSS
此接口允许DOM用户在文档上下文之外创建CSSStyleSheet。无法将新的CSSStyleSheet与DOM Level 2中的文档相关联。
IDL Definition
// Introduced in DOM Level 2:
interface DOMImplementationCSS : DOMImplementation {
CSSStyleSheet createCSSStyleSheet(in DOMString title,
in DOMString media)
raises(DOMException);
};
复制代码
Methods
- createCSSStyleSheet
Creates a new CSSStyleSheet.
ElementCSSInlineStyle
附加到元素的内联样式信息通过style属性公开。这表示HTML元素(或其他模式中的元素或以相同方式使用STYLE属性的DTD)的STYLE属性的内容。期望是当元素支持内联CSS样式信息时,可以通过在Element接口的实例上使用特定于绑定的转换方法来获取ElementCSSInlineStyle接口的实例。
IDL Definition
// Introduced in DOM Level 2:
interface ElementCSSInlineStyle {
readonly attribute CSSStyleDeclaration style;
};
复制代码
CSS2 properties
该CSS2Properties接口代表了一种便捷机制,用于检索和设置属性CSSStyleDeclaration。此接口的属性对应 于CSS2中指定的所有属性。获取此接口的属性等同于调用 接口的 getPropertyValue方法CSSStyleDeclaration。设置此接口的属性等同于调用 接口的setProperty方法CSSStyleDeclaration。
实现CSS2Properties接口不需要符合CSS模块的实现。如果实现确实实现了此接口,则期望特定于语言的方法可用于从CSSStyleDeclaration 接口的实例转换为CSS2Properties接口。
如果实现确实实现了这个接口,那么它应该理解速记属性的特定语法,并应用它们的语义; 当margin 属性被设置,例如,marginTop, marginRight,marginBottom和 marginLeft性质实际上是由于底层实现设置。
在处理CSS“速记”属性时,应根据需要将速记属性分解为其组件的手写属性,并且在查询其值时,返回的表单应该是与规则集中的声明完全等效的最短形式。但是,如果没有可以添加到规则集的速记声明而不以任何方式更改规则集中已经声明的规则(即,通过添加先前未在规则集中声明的冗长规则),则空字符串应该是返回速记属性。
例如,font当“14pt Arial,sans-serif”足够时,查询属性不应该返回“正常正常14pt /正常Arial,sans-serif”。(法线是初始值,使用纵向属性隐含。)
如果组成特定字符串的所有longhand属性的值都是初始值,则应返回由所有初始值组成的字符串(例如 border-width,应返回“medium”值,而不是“”)。
对于采用缺失值从其它侧一些缩写属性,如margin,padding和border-[width|style|color]性质,应使用侧可能的最小数量; 即,将返回“0px 10px”而不是“0px 10px 0px 10px”。
如果速记属性的值无法分解为其组件的longhand属性,就像font具有值“menu” 的属性的情况一样 ,查询组件longhand属性的值应该返回空字符串。
小结
CSSStyleSheet
ownerRule
CSSStyleRule.proto = CSSRule.propertype CSSImportRule.proto = CSSRule.propertype
CSSRuleList[CSSStyleRule, CSSImportRule]
document.body.style.proto = CSSStyleDeclaration.prototype