CSS 对象模型

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

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

下面列一些常用的API

对象：

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

上面代码中，该元素的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接口代表网页的一张样式表，包括元素加载的样式表和 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()操作。

​​​​​​​

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()得到

属性：

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

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

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

// HTML 代码如下
// 

document.getElementById('myDiv').style.length;// 3

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

实例方法：

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

// HTML 代码为
// 

var style = document.getElementById('myDiv').style;
style.margin // "10px"
style.getPropertyPriority('margin') // "important"
style.getPropertyPriority('color') // ""

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

// HTML 代码为
// 

var style = document.getElementById('myDiv').style;
style.margin // "10px"
style.getPropertyValue("margin") // "10px"

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

// HTML 代码为
// 

var style = document.getElementById('myDiv').style;
style.item(0) // "color"
style.item(1) // "background-color"

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

// HTML 代码为
// 

//   111
// 
var style = document.getElementById('myDiv').style;
style.removeProperty('color') // 'red'
// HTML 代码变为
// 

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

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

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

  // HTML 代码为
  // 
  
  //   111
  // 
  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