JavaScript学习-操作样式的DOM API

1，介绍

• 定义样式的方式有3种
  
  • 通过link元素包含外部样式表文件。
  • 使用style元素定义嵌入式样式。
  • 使用style特性定义针对特定元素的样式。

• 确定浏览器是否支持DOM2级定义的CSS能力，可以使用一下代码。

  var supportsDOM2CSS = document.implementation.hasFeature("CSS","2.0");var supportsDOM2CSS2 = document.implementation.hasFeature("CSS2","2.0");

2，访问元素的样式

1. 通过style特性
   
   • 包含style特性的元素都有一个对应的style属性对象，这个对象是CSSStyleDeclaration实例。
   • 在style特性中指定的任何CSS属性都将表现为这个style对象的相应属性。特点如下
     
     • 对于使用短划线(分隔不同的词汇，例如background-image)的CSS属性名，必须转换成驼峰大小写形式。
     • 一个不能直接转换的CSS属性是float。DOM2级样式规范规定相应的属性名是cssFloat，IE则是styleFloat。
   • DOM样式的属性和方法
     
2. 计算的样式
   
   • 从其他样式表层叠而来并影响到当前元素的样式信息。
   • document.defaultView.getComputedSytle()方法
     
     • 接收两个参数:要取得计算样式的元素，一个伪元素字符串(例如“:after”，可为null)。
     • 返回一个CSSStyleDeclaration对象。
     • 从外包含的样式(或嵌入的样式)属性若与特性相同会被覆盖。
   • IE不支持getComputedSytle()方法，在IE中每个具有style属性的元素还有一个currentStyle属性，包含当前元素全部计算后的样式，类似于getComputedSytle()方法。
   • 所有计算的样式都是只读的。

3，操作样式表

• CSSStyleSheet表示样式表，包括通过link元素包含的样式表和在style元素中定义的样式表，分别是HTMLLinkElement和HTMLStyleElement类型。CSSStyleSheet类型相对更加通用一些，不管这些样式在HTML中如何定义的，CSSStyleSheet是只读的。

• 使用下列代码可以确定浏览器是否支持DOM2级样式表

  var supportsDOM2StyleSheets = document.implementation.hasFeature("StylesSheets","2.0");

• CSSStyleSheet继承自StyleSheet，StyleSheet的属性如下：
  

• 获取styleSheet兑现的方式

  • 通过document.styleSheets集合，使用length和item()（或者方括号）访问每一个样式表。

  • 通过link和style元素取得CSSStyleSheet对象。使用sheet表示，IE使用styleSheet属性。

    • 代码示例

    function getStyleSheet(element){    return element.sheet || element.styleSheet;}// 取得第一个link元素引入的样式表var link = document.getElementsByTagName("link")[0];var sheet = getStyleSheet(link);

4，CSS规则CSSRule

• CSSStyleRule继承自CSSRule，CSSStyleRule包含下列属性：
  

• 创建规则insertRule()方法

  • 接收两个参数:规则文本和表示在哪里插入规则的索引。

    sheet.insertRule("body { background-color:silver }"，0);//DOM方法

• 删除规则deleteRule()方法

  • 参数：要删除的规则的位置。

  • 代码示例

    function deleteRule(sheet,index){    if (sheet.deleteRule){        sheet.deleteRule(index);    }else if(sheet.removeRule){        sheet.removeRule(index);//对IE    }}