CSS 对象模型

定义： CSS对象模型是一组允许用JavaScript操纵CSS的API，他很像DOM，但针对的是CSS而不是HTML。它允许用户动态地读取和修改CSS样式

CSS的值是没有类型的，也就是使用String对象来表示

下面列一些常用的API

对象：

1. CSS.escape()  用于转义css里面的特殊字符

<div id="foo#bar"></div>

上面代码中，该元素的id属性包含一个#号，该字符在 CSS 选择器里面有特殊含义。不能直接写成document.querySelector('#foo#bar')，只能写成document.querySelector('#foo\\#bar')

CSS.escape方法就用来转义那些特殊字符。

document.querySelector('#' + CSS.escape('foo#bar'))

2. CSS.supports 返回一个布尔值，表示当前环境是否支持某一句CSS规则。

它的参数有两种写法，一种是第一个参数是属性名，第二个参数是属性值；另一种是整个参数就是一行完整的 CSS 语句。

// 第一种写法
CSS.supports('transform-origin', '5px') // true
// 第二种写法
CSS.supports('display: table-cell') // true

注意，第二种写法的参数结尾不能带有分号，否则结果不准确。

CSS.supports('display: table-cell;') // false

3. window.getComputedStyle() 返回浏览器计算后得到的最终规则。它接受一个节点对象作为参数，返回一个 CSSStyleDeclaration 实例

getComputedStyle方法还可以接受第二个参数，表示当前元素的伪元素（比如:before、:after、:first-line、:first-letter等）。

注意

• CSSStyleDeclaration 实例返回的 CSS 值都是绝对单位。比如，长度都是像素单位（返回值包括px后缀），颜色是rgb(#, #, #)或rgba(#, #, #, #)格式。
• CSS 规则的简写形式无效。比如，想读取margin属性的值，不能直接读，只能读marginLeft、marginTop等属性；再比如，font属性也是不能直接读的，只能读font-size等单个属性。
• 如果读取 CSS 原始的属性名，要用方括号运算符，比如styleObj['z-index']；如果读取骆驼拼写法的 CSS 属性名，可以直接读取styleObj.zIndex。
• 该方法返回的 CSSStyleDeclaration 实例的cssText属性无效，返回undefined

4. StyleSheet 接口

StyleSheet接口代表网页的一张样式表，包括<link>元素加载的样式表和<style>元素内嵌的样式表。

var sheets = document.styleSheets;

严格地说，StyleSheet接口不仅包括网页样式表，还包括 XML 文档的样式表。所以，它有一个子类CSSStyleSheet表示网页的 CSS 样式表。我们在网页里面拿到的样式表实例，实际上是CSSStyleSheet的实例。这个子接口继承了StyleSheet的所有属性和方法，并且定义了几个自己的属性。

实例属性：

        (1) StyleSheet.disabled  返回一个布尔值，表示该样式表是否处于禁用状态。手动设置disabled属性为true，等同于在<link>元素里面，将这张样式表设为alternate stylesheet，即该样式表将不会生效。

        (2) Stylesheet.href  返回样式表的网址。对于内嵌样式表，该属性返回null。该属性只读。

        (3) StyleSheet.media  属性返回一个类似数组的对象（MediaList实例），成员是表示适用媒介的字符串。表示当前样式表是用于屏幕（screen），还是用于打印（print）或手持设备（handheld），或各种媒介都适用（all）。该属性只读，默认值是screen。

document.styleSheets[0].media.mediaText  // "all"

MediaList实例的appendMedium方法，用于增加媒介；deleteMedium方法用于删除媒介。

document.styleSheets[0].media.appendMedium('handheld');
document.styleSheets[0].media.deleteMedium('print');

        (4) StyleSheet.title  属性返回样式表的title属性。

        (5) StyleSheet.type  属性返回样式表的type属性，通常是text/css

        (6) StyleSheet.parentStyleSheet  CSS 的@import命令允许在样式表中加载其他样式表。StyleSheet.parentStyleSheet属性返回包含了当前样式表的那张样式表。如果当前样式表是顶层样式表，则该属性返回null。

        (7) StyleSheet.ownerNode  属性返回StyleSheet对象所在的 DOM 节点，通常是<link>或<style>。对于那些由其他样式表引用的样式表，该属性为null。

        (8) CSSStyleSheet.cssRules  属性指向一个类似数组的对象（CSSRuleList实例），里面每一个成员就是当前样式表的一条 CSS 规则。使用该规则的cssText属性，可以得到 CSS 规则对应的字符串。

        (9) CSSStyleSheet.ownerRule  有些样式表是通过@import规则输入的，它的ownerRule属性会返回一个CSSRule实例，代表那行@import规则。如果当前样式表不是通过@import引入的，ownerRule属性返回null。

实例：添加样式表

网页添加样式表有两种方式。一种是添加一张内置样式表，即在文档中添加一个<style>节点。

// 写法一
var style = document.createElement('style');
style.setAttribute('media', 'screen');
style.innerHTML = 'body{color:red}';
document.head.appendChild(style);
// 写法二
var style = (function () {
  var style = document.createElement('style');
  document.head.appendChild(style);
  return style;
})();
style.sheet.insertRule('.foo{color:red;}', 0);

另一种是添加外部样式表，即在文档中添加一个<link>节点，然后将href属性指向外部样式表的 URL。

var linkElm = document.createElement('link');
linkElm.setAttribute('rel', 'stylesheet');
linkElm.setAttribute('type', 'text/css');
linkElm.setAttribute('href', 'reset-min.css');
document.head.appendChild(linkElm);

CSSRuleList 接口是一个类似数组的对象，表示一组 CSS 规则，成员都是 CSSRule 实例。

获取 CSSRuleList 实例，一般是通过StyleSheet.cssRules属性。

// <style id="myStyle">
//   h1 { color: red; }
//   p { color: blue; }
// </style>
var myStyleSheet = document.getElementById('myStyle').sheet;
var crl = myStyleSheet.cssRules;
crl instanceof CSSRuleList // true

CSSRuleList 实例里面，每一条规则（CSSRule 实例）可以通过rules.item(index)或者rules[index]拿到。CSS 规则的条数通过rules.length拿到。还是用上面的例子。

crl[0] instanceof CSSRule // true
crl.length // 2

 注意，添加规则和删除规则不能在 CSSRuleList 实例操作，而要在它的父元素 StyleSheet 实例上，通过StyleSheet.insertRule()和StyleSheet.deleteRule()操作。

CSSRule 接口

一条 CSS 规则包括两个部分：CSS 选择器和样式声明。下面就是一条典型的 CSS 规则。

JavaScript 通过 CSSRule 接口操作 CSS 规则。一般通过 CSSRuleList 接口（StyleSheet.cssRules）获取 CSSRule 实例。

// <style id="myStyle">
//   .myClass {
//     color: red;
//     background-color: yellow;
//   }
// </style>
var myStyleSheet = document.getElementById('myStyle').sheet;
var ruleList = myStyleSheet.cssRules;
var rule = ruleList[0];
rule instanceof CSSRule // true

CSSRule 实例的属性

（1）CSSRule.cssText 属性返回当前规则的文本，还是使用上面的例子。

rule.cssText
// ".myClass { color: red; background-color: yellow; }"

如果规则是加载（@import）其他样式表，cssText属性返回@import 'url'。

（2）CSSRule.parentStyleSheet  属性返回当前规则所在的样式表对象（StyleSheet 实例），还是使用上面的例子。

rule.parentStyleSheet === myStyleSheet // true

（3）CSSRule.parentRule  属性返回包含当前规则的父规则，如果不存在父规则（即当前规则是顶层规则），则返回null。

父规则最常见的情况是，当前规则包含在@media规则代码块之中。

// HTML 代码如下
// <style id="myStyle">
//   @supports (display: flex) {
//     @media screen and (min-width: 900px) {
//       article {
//         display: flex;
//       }
//     }
//  }
// </style>
var myStyleSheet = document.getElementById('myStyle').sheet;
var ruleList = myStyleSheet.cssRules;
var rule0 = ruleList[0];
rule0.cssText
// "@supports (display: flex) {
//    @media screen and (min-width: 900px) {
//      article { display: flex; }
//    }
// }"
// 由于这条规则内嵌其他规则，
// 所以它有 cssRules 属性，且该属性是 CSSRuleList 实例
rule0.cssRules instanceof CSSRuleList // true
var rule1 = rule0.cssRules[0];
rule1.cssText
// "@media screen and (min-width: 900px) {
//   article { display: flex; }
// }"
var rule2 = rule1.cssRules[0];
rule2.cssText
// "article { display: flex; }"
rule1.parentRule === rule0 // true
rule2.parentRule === rule1 // true

（4）CSSRule.type  属性返回一个整数值，表示当前规则的类型。

最常见的类型有以下几种。

• 1：普通样式规则（CSSStyleRule 实例）
• 3：@import规则
• 4：@media规则（CSSMediaRule 实例）
• 5：@font-face规则

CSSStyleRule 接口 

如果一条 CSS 规则是普通的样式规则（不含特殊的 CSS 命令），那么除了 CSSRule 接口，它还部署了 CSSStyleRule 接口。

CSSStyleRule 接口有以下两个属性。

（1）CSSStyleRule.selectorText  属性返回当前规则的选择器。注意，这个属性是可写的。

var stylesheet = document.styleSheets[0];
stylesheet.cssRules[0].selectorText // ".myClass"

（2）CSSStyleRule.style  属性返回一个对象（CSSStyleDeclaration 实例），代表当前规则的样式声明，也就是选择器后面的大括号里面的部分。

// <style id="myStyle">
//   p { color: red; }
// </style>
var styleSheet = document.getElementById('myStyle').sheet;
styleSheet.cssRules[0].style instanceof CSSStyleDeclaration
// true

CSSStyleDeclaration 实例的cssText属性，可以返回所有样式声明，格式为字符串。

styleSheet.cssRules[0].style.cssText
// "color: red;"
styleSheet.cssRules[0].selectorText
// "p"

CSSMediaRule 接口

!TODO ...

CSSStyleDeclaration 接口

CSSStyleDeclaration 接口可以直接读写 CSS 的样式属性，不过，连词号需要变成骆驼拼写法。

var divStyle = document.querySelector('div').style;
divStyle.backgroundColor = 'red';//写
divStyle.backgroundColor // red    读

上面代码中，style属性的值是一个 CSSStyleDeclaration 实例。这个对象所包含的属性与 CSS 规则一一对应，【一般属性带横线的要改成驼峰，但是如果是保留字，要前面加css   如：float -> cssFloat】

Element.style返回的只是行内样式，并不是该元素的全部样式。通过样式表设置的样式，或者从父元素继承的样式，无法通过这个属性得到。元素的全部样式要通过window.getComputedStyle()得到

属性：

        (1)  CSSStyleDeclaration.cssText属性用来读写当前规则的所有样式声明文本。

var divStyle = document.querySelector('div').style;
divStyle.cssText = 'background-color: red;'
  + 'border: 1px solid black;'
  + 'height: 100px;'

        (2)  CSSStyleDeclaration.length属性返回一个整数值，表示当前规则包含多少条样式声明。

// HTML 代码如下
// <div id="myDiv"
//   style="height: 1px;width: 100%;background-color: #CA1;"
// ></div>
document.getElementById('myDiv').style.length;// 3

        (3)  CSSStyleDeclaration.parentRule属性返回当前规则所属的那个样式块（CSSRule 实例）。如果不存在所属的样式块，该属性返回null。  //TODO

实例方法：

        (1)  CSSStyleDeclaration.getPropertyPriority() 方法接受 CSS 样式的属性名作为参数，返回字符串，表示有没有设置important优先级。如果有就返回important，否则返回空字符串。

// HTML 代码为
// <div id="myDiv" style="margin: 10px!important; color: red;"/>
var style = document.getElementById('myDiv').style;
style.margin // "10px"
style.getPropertyPriority('margin') // "important"
style.getPropertyPriority('color') // ""

       (2)  CSSStyleDeclaration.getPropertyValue() 方法接受 CSS 样式属性名作为参数，返回一个字符串，表示该属性的属性值。

// HTML 代码为
// <div id="myDiv" style="margin: 10px!important; color: red;"/>
var style = document.getElementById('myDiv').style;
style.margin // "10px"
style.getPropertyValue("margin") // "10px"

        (3)  CSSStyleDeclaration.item()方法接受一个整数值作为参数，返回该位置的 CSS 属性名。

// HTML 代码为
// <div id="myDiv" style="color: red; background-color: white;"/>
var style = document.getElementById('myDiv').style;
style.item(0) // "color"
style.item(1) // "background-color"

        (4)  CSSStyleDeclaration.removeProperty() 方法接受一个属性名作为参数，在 CSS 规则里面移除这个属性，返回这个属性原来的值。

// HTML 代码为
// <div id="myDiv" style="color: red; background-color: white;">
//   111
// </div>
var style = document.getElementById('myDiv').style;
style.removeProperty('color') // 'red'
// HTML 代码变为
// <div id="myDiv" style="background-color: white;">

        (5)  CSSStyleDeclaration.setProperty() 方法用来设置新的 CSS 属性。该方法没有返回值。

   该方法可以接受三个参数。

• 第一个参数：属性名，该参数是必需的。
•  第二个参数：属性值，该参数可选。如果省略，则参数值默认为空字符串。
• 第三个参数：优先级，该参数可选。如果设置，唯一的合法值是important，表示 CSS 规则里面的!important。

  // HTML 代码为
  // <div id="myDiv" style="color: red; background-color: white;">
  //   111
  // </div>
  var style = document.getElementById('myDiv').style;
  style.setProperty('border', '1px solid blue');

检测浏览器是否支持某些css属性方法 

function isPropertySupported(property) {
  if (property in document.body.style) return true;
  var prefixes = ['Moz', 'Webkit', 'O', 'ms', 'Khtml'];
  var prefProperty = property.charAt(0).toUpperCase() + property.substr(1);
  for(var i = 0; i < prefixes.length; i++){
    if((prefixes[i] + prefProperty) in document.body.style) return true;
  }
  return false;
}
isPropertySupported('background-clip')
// true