样式操作

通过 JavaScript 动态修改页面样式。

CSS 对应 DOM 对象

<link rel="stylesheet" type="text/css" href="sample.css">// var element = document.querySelector('link');// 对应于 element.sheet<style type="text/css" media="screen"> body { margin: 30px }</style>// var element = document.querySelector('style');// 对应于 element.sheet// 整个页面的全部样式（不包括行内样式）document.styleSheets<p style="color:red">Text Color</p>// var element = document.querySelector('p');// 对应于 element.style

内部样式表

<style> body{margin:30;} p{color: #aaa; line-height:20px}</style>// 1.对应所有样式的列表// body{margin:30;}// p{color: #aaa; line-height:20px}element.sheet.cssRules;// 2.对应相应的 CSS 选择器// pelement.sheet.cssRules[1].selectorText;// 3.对应一个样式// p{color: #aaa; line-height:20px}element.sheet.cssRules[1]// 4.对应所有样式的键值对// color: #aaa; line-height:20pxelement.sheet.cssRules[1].style;// 5.对应的属性值// #aaaelement.sheet.cssRules[1].stlye.color;element.sheet.cssRules[1].lineHeight;

行内样式

其对应于 CSSStyleDeclaration 的对象。

element.style.color;// 获取行内样式的键值对

更新样式

element.style

element.style.color = 'red';element.style.background = 'black';

增加样式后得到的结果

<div style="color: red; background: black;"></div>

缺点

每个属性的更新都需要一个命令命名异常（以驼峰命名法命名属性）

element.style.cssText

一次同时设置多个行内样式，其结果同 element.style 单独设置相同。

element.style.cssText = 'color: red; background: black';

增加样式后得到的结果

<div style="color: red; background: black;"></div>

以上两种方式均将样式混合在逻辑当中。

更新 class

首先需要创建对应样式的 CSS 样式。

.angry { color: red; background: black;}

然后再在 JavaScript 中，在对应的事件中给元素添加需要的类即可。

element.className += ' angry';

增加样式后得到的结果

<div class="angry"></div>

统一更新多个元素样式

以上方法均不适合同时更新多个样式，通过更换样式表的方式则可同时更改多个页面中的样式。将需要的大量样式也在一个皮肤样式表中，通过 JavaScript 来直接更换样式表来进行样式改变。（此方法也可用于批量删除样式）

<link rel="stylesheet" type="text/css" href="base.css"><link rel="stylesheet" type="text/css" href="style1.css">element.setAttribute('href', 'style2.css');

获取样式

element.style

其对应的为元素的行内样式表而不是实际样式表。

<input type="checkbox" name="" value="">element.style.color; // ""

line-height: 200px

window.getComputedStyle()

将需要取出样式的目标元素传入 window.getComputedStyle() 函数中，即可得到对应元素的实际样式。注意的是这里获取到的样式值为只读属性不可修改！获取的实际为 CSSStyleDeclaration 的实例对象。

此方法不支持 IE9 以下版本，IE9 中需使用 element.currentStyle 来做兼容。

var style = window.getComputedStyle(element[, pseudoEle]);<input type="checkbox" name="" value="">window.getComputedStyle(element).color; // 'rgb(0,0,0)'