当前位置:首页 > 前端 > 教程 > JavaScript 动态插入 样式表

JavaScript 动态插入 样式表

大家对于有些网站的换肤功能应该不陌生吧,看起来很酷的样子,其实原理很简单,今天就带大家说所js动态引入css。
写组件时有时想把一些组件特性相关的 CSS 样式封装在 JS 里,这样更内聚,改起来方便。JS 动态插入 CSS 两个步骤就可以。

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

一、查看样式表

先看下 document.styleSheets,随意打开一个页面
css
其中前三个是通过 link 标签引入的 CSS 文件,第四个是通过 style 标签内联在页面里的 CSS。有如下属性
css
每一个 cssRule 又有如下属性
css
其中的 cssText 正是写在 style 的源码。

二、动态插入 CSS

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

1
2
3
4
5
6
7
8
9
10
11
/*
 * 创建一个 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 如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*
 * 动态添加 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。

完整代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
/*
 * 动态添加 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判断的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*
 * 动态添加 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);
    }
}();

看到这里,相信很多人已经看懂了它的具体实现的原理了。

  • << Unity 3D游戏开发
  • Web三问:What? Why? How? >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/javascript-css/

    相关文章 近期热评 最新文章

    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程
    • c#类的构造函数继承关系示例剖析
      本文通过示例代码讲解了c#子类的构造函数与父类的关系,子类怎样集成父类的构造函数的。