许先生__
许先生__

CSS操作

CSS与JavaScript是两个有着明确分工的领域，前者负责页面的视觉效果，后者负责与用户的行为互动。但是，它们毕竟同属网页开发的前端，因此不可避免有着交叉和互相配合。本节介绍如果通过JavaScript操作CSS。

style属性

操作 CSS 样式最简单的方法，就是使用网页元素节点的getAttribute方法、setAttribute方法和removeAttribute方法，直接读写或删除网页元素的style属性。

div.setAttribute(
  'style',
  'background-color:red;' + 'border:1px solid black;'
);

上面的代码相当于下面的 HTML 代码。

Style对象

每一个网页元素对应一个DOM节点对象。这个对象的style属性可以直接操作，用来读写行内CSS样式。

var divStyle = document.querySelector('div').style;

divStyle.backgroundColor = 'red';
divStyle.border = '1px solid black';
divStyle.width = '100px';
divStyle.height = '100px';
divStyle.fontSize = '10em';

divStyle.backgroundColor // red
divStyle.border // 1px solid black
divStyle.height // 100px
divStyle.width // 100px

上面代码中，style属性的值是一个对象（简称style对象）。这个对象所包含的属性与CSS规则一一对应，但是名字需要改写，比如background-color写成backgroundColor。改写的规则是将横杠从CSS属性名中去除，然后将横杠后的第一个字母大写。如果CSS属性名是JavaScript保留字，则规则名之前需要加上字符串css，比如float写成cssFloat。

注意，style对象的属性值都是字符串，设置时必须包括单位，但是不含规则结尾的分号。比如，divStyle.width不能写为100，而要写为100px。

下面是一个例子，通过监听事件，改写网页元素的CSS样式。

var docStyle = document.documentElement.style;
var someElement = document.querySelector(...);

document.addEventListener('mousemove', function (e) {
  someElement.style.transform =
    'translateX(' + e.clientX + 'px)' +
    'translateY(' + e.clientY + 'px)';
});

cssText属性

元素节点对象的style对象，有一个cssText属性，可以读写或删除整个样式。

var divStyle = document.querySelector('div').style;

divStyle.cssText = 'background-color: red;'
  + 'border: 1px solid black;'
  + 'height: 100px;'
  + 'width: 100px;';

注意，cssText的属性值不用改写CSS属性名。

CSS模块的侦测

CSS的规格发展太快，新的模块层出不穷。不同浏览器的不同版本，对CSS模块的支持情况都不一样。有时候，需要知道当前浏览器是否支持某个模块，这就叫做“CSS模块的侦测”。

一个比较普遍适用的方法是，判断某个DOM元素的style对象的某个属性值是否为字符串。

typeof element.style.animationName === 'string';
typeof element.style.transform === 'string';

如果该CSS属性确实存在，会返回一个字符串。即使该属性实际上并未设置，也会返回一个空字符串。如果该属性不存在，则会返回undefined。

document.body.style['maxWidth'] // ""
document.body.style['maximumWidth'] // undefined

需要注意的是，不管CSS属性名带不带连词线，style对象都会显示该属性存在。

document.body.style['backgroundColor'] // ""
document.body.style['background-color'] // ""

所有浏览器都能用这个方法，但是使用的时候，需要把不同浏览器的CSS规则前缀也考虑进去。

var content = document.getElementById("content");
typeof content.style['webkitAnimation'] === 'string'

这种侦测方法可以写成一个函数。

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

此外，部分浏览器（Firefox 22+, Chrome 28+, Opera 12.1+）目前部署了supports API，可以返回一个布尔值，表示是否支持某条CSS规则。但是，这个API还没有成为标准。

CSS.supports('transform-origin', '5px');
CSS.supports('(display: table-cell) and (display: list-item)');

setProperty()，getPropertyValue()，removeProperty()

Style对象的以下三个方法，用来读写行内CSS规则。

  • setProperty(propertyName,value)：设置某个CSS属性。
  • getPropertyValue(propertyName)：读取某个CSS属性。
  • removeProperty(propertyName)：删除某个CSS属性。

这三个方法的第一个参数，都是CSS属性名，且不用改写连词线。

var divStyle = document.querySelector('div').style;

divStyle.setProperty('background-color','red');
divStyle.getPropertyValue('background-color');
divStyle.removeProperty('background-color');

window.getComputedStyle()

行内样式（inline style）具有最高的优先级，改变行内样式，通常会立即反映出来。但是，网页元素最终的样式是综合各种规则计算出来的。因此，如果想得到元素现有的样式，只读取行内样式是不够的，我们需要得到浏览器最终计算出来的那个样式规则。

window.getComputedStyle方法，就用来返回这个规则。它接受一个DOM节点对象作为参数，返回一个包含该节点最终样式信息的对象。所谓“最终样式信息”，指的是各种CSS规则叠加后的结果。

var div = document.querySelector('div');
window.getComputedStyle(div).backgroundColor

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

var result = window.getComputedStyle(div, ':before');

下面的例子是如何获取元素的高度。

var elem = document.getElementById('elem-container');
var hValue = window.getComputedStyle(elem, null)
  .getPropertyValue('height');

上面代码得到的height属性，是浏览器最终渲染出来的高度，比其他方法得到的高度有更大的可靠性。

有几点需要注意。

  • 返回的CSS值都是绝对单位，比如，长度都是像素单位（返回值包括px后缀），颜色是rgb(#, #, #)或rgba(#, #, #, #)格式。
  • CSS规则的简写形式无效，比如，想读取margin属性的值，不能直接读，只能读marginLeft、marginTop等属性。
  • 如果一个元素不是绝对定位，top和left属性总是返回auto。
  • 该方法返回的样式对象的cssText属性无效，返回undefined。
  • 该方法返回的样式对象是只读的，如果想设置样式，应该使用元素节点的style属性。

CSS伪元素

CSS伪元素是通过CSS向DOM添加的元素，主要方法是通过:before和:after选择器生成伪元素，然后用content属性指定伪元素的内容。

以如下HTML代码为例。

Test content

CSS添加伪元素的写法如下。

#test:before {
  content: 'Before ';
  color: #FF0;
}

DOM节点的style对象无法读写伪元素的样式，这时就要用到window对象的getComputedStyle方法（详见下面介绍）。JavaScript获取伪元素，可以使用下面的方法。

var test = document.querySelector('#test');

var result = window.getComputedStyle(test, ':before').content;
var color = window.getComputedStyle(test, ':before').color;

此外，也可以使用window.getComputedStyle对象的getPropertyValue方法，获取伪元素的属性。

var result = window.getComputedStyle(test, ':before')
  .getPropertyValue('content');
var color = window.getComputedStyle(test, ':before')
  .getPropertyValue('color');

StyleSheet对象

获取样式表

StyleSheet对象代表网页的一张样式表，它包括节点加载的样式表和