CSS 对象模型 - 技术栈

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

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

下面列一些常用的API

对象：

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

html 复制代码

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

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

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

javascript 复制代码

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

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

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

javascript 复制代码

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

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

javascript 复制代码

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>元素内嵌的样式表。

javascript 复制代码

var sheets = document.styleSheets;

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

实例属性：

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

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

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

javascript 复制代码

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

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

javascript 复制代码

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

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

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

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

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

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

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

CSSStyleDeclaration 接口

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

javascript 复制代码

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属性用来读写当前规则的所有样式声明文本。

javascript 复制代码

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

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

javascript 复制代码

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

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

实例方法：

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

javascript 复制代码

// 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') // ""

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

javascript 复制代码

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

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

javascript 复制代码

// 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"

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

javascript 复制代码

// 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;">

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

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

第一个参数：属性名，该参数是必需的。
第二个参数：属性值，该参数可选。如果省略，则参数值默认为空字符串。

第三个参数：优先级，该参数可选。如果设置，唯一的合法值是important，表示 CSS 规则里面的!important。

javascript 复制代码

// 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属性方法

javascript 复制代码

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