JavaScript 动态插入 CSS

2015-10-12 18:32 1455 0

摘要: 写组件时有时想把一些组件特性相关的 CSS 样式封装在 JS 里，这样更内聚，改起来方便。JS 动态插入 CSS 两个步骤就可以1 创建一个 style 对象2 使用 stylesheet 的 insertRule 或 addRule 方法添加样式一、查看样式 ...

关键词： style index sheet stylesheet selector 样式 document rules 规则 function

写组件时有时想把一些组件特性相关的 CSS 样式封装在 JS 里，这样更内聚，改起来方便。JS 动态插入 CSS 两个步骤就可以

1 创建一个 style 对象2 使用 stylesheet 的 insertRule 或 addRule 方法添加样式

一、查看样式表

先看下 document.styleSheets，随意打开一个页面

其中前三个是通过 link 标签引入的 CSS 文件，第四个是通过 style 标签内联在页面里的 CSS。有如下属性

每一个 cssRule 又有如下属性

其中的 cssText 正是写在 style 的源码。

二、动态插入 CSS

首先，需要创建一个 style 对象，返回其 stylesheet 对象

/*
 * 创建一个 style， 返回其 stylesheet 对象
 * 注意：IE6/7/8中使用 style.stylesheet，其它浏览器 style.sheet
 */
function createStyleSheet() {
  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';
  head.appendChild(style);
  return style.sheet ||style.styleSheet;
}

添加函数 addCssRule 如下

/*
 * 动态添加 CSS 样式
 * @param selector {string} 选择器
 * @param rules    {string} CSS样式规则
 * @param index    {number} 插入规则的位置, 靠后的规则会覆盖靠前的
 */
function addCssRule(selector, rules, index) {
    index = index || 0;
    if (sheet.insertRule) {  
        sheet.insertRule(selector + "{" + rules + "}", index);  
    } else if (sheet.addRule) {  
        sheet.addRule(selector, rules, index);  
    }
}

需要注意，标准浏览器支持 insertRule ， IE低版本则支持 addRule 。

完整代码如下

/*
 * 动态添加 CSS 样式
 * @param selector {string} 选择器
 * @param rules    {string} CSS样式规则
 * @param index    {number} 插入规则的位置, 靠后的规则会覆盖靠前的
 */
var addCssRule = function() {
  // 创建一个 style， 返回其 stylesheet 对象
  // 注意：IE6/7/8中使用 style.stylesheet，其它浏览器 style.sheet
  function createStyleSheet() {
    var head = document.head || document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    style.type = 'text/css';
    head.appendChild(style);
    return style.sheet ||style.styleSheet;
  }

  // 创建 stylesheet 对象
  var sheet = createStyleSheet();

  // 返回接口函数
  return function(selector, rules, index) {
    index = index || 0;
      if (sheet.insertRule) {  
          sheet.insertRule(selector + "{" + rules + "}", index);  
      } else if (sheet.addRule) {  
          sheet.addRule(selector, rules, index);  
      }
  }
}();

如果只支持移动端或现代浏览器，可以去掉低版本IE判断的代码

/*
 * 动态添加 CSS 样式
 * @param selector {string} 选择器
 * @param rules	{string} CSS样式规则
 * @param index	{number} 插入规则的位置, 靠后的规则会覆盖靠前的，默认在后面插入
 */
var addCssRule = function() {
  // 创建一个 style， 返回其 stylesheet 对象
  function createStyleSheet() {
    var style = document.createElement('style');
    style.type = 'text/css';
    document.head.appendChild(style);
    return style.sheet;
  }
  // 创建 stylesheet 对象
  var sheet = createStyleSheet();
  // 返回接口函数
  return function(selector, rules, index) {
    index = index || 0;
    sheet.insertRule(selector + "{" + rules + "}", index);
  }
}();