Table of Contents generated with DocToc

样式操作

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

CSS 对应 DOM 对象

样式操作 - 图1

  1. <link rel="stylesheet" type="text/css" href="sample.css">
  2. // var element = document.querySelector('link');
  3. // 对应于 element.sheet
  5. <style type="text/css" media="screen">
  6.   body {
  7.     margin: 30px
  8.   }
  9. </style>
  10. // var element = document.querySelector('style');
  11. // 对应于 element.sheet
  13. // 整个页面的全部样式（不包括行内样式）
  14. document.styleSheets
  16. <p style="color:red">Text Color</p>
  17. // var element = document.querySelector('p');
  18. // 对应于 element.style

内部样式表

  1. <style>
  2.   body{margin:30;}
  3.   p{color: #aaa; line-height:20px}
  4. </style>
  6. // 1.对应所有样式的列表
  7. // body{margin:30;}
  8. // p{color: #aaa; line-height:20px}
  9. element.sheet.cssRules;
  11. // 2.对应相应的 CSS 选择器
  12. // p
  13. element.sheet.cssRules[1].selectorText;
  15. // 3.对应一个样式
  16. // p{color: #aaa; line-height:20px}
  17. element.sheet.cssRules[1]
  19. // 4.对应所有样式的键值对
  20. // color: #aaa; line-height:20px
  21. element.sheet.cssRules[1].style;
  23. // 5.对应的属性值
  24. // #aaa
  25. element.sheet.cssRules[1].stlye.color;
  26. element.sheet.cssRules[1].lineHeight;

行内样式

其对应于 CSSStyleDeclaration 的对象。

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

更新样式

element.style

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

增加样式后得到的结果

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

缺点

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

element.style.cssText

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

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

增加样式后得到的结果

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

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

更新 class

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

  1. .angry {
  2.   color: red;
  3.   background: black;
  4. }

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

  1. element.className += ' angry';

增加样式后得到的结果

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

统一更新多个元素样式

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

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

获取样式

element.style

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

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

line-height: 200px

window.getComputedStyle()

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

NOTE：获取的实际为 CSSStyleDeclaration 的实例对象。
NOTE+：此方法不支持 IE9 以下版本，IE9 中需使用 element.currentStyle 来做兼容。

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