示例1:

   增加样式表

   示例代码:

function addStylesheet(url, media) {
                var link = document.createElement('link');
                link.setAttribute('rel', 'stylesheet');
                link.setAttribute('type', 'text/css');
                link.setAttribute('meida', media);
                link.setAttribute('href', url);
                document.getElementsByTagName('head')[0].appendChild(link);
            }

示例2:

   获取样式表

   示例代码:

function getStylesheet(url, media) {
                var sheets = [];
                for (var i = 0; i < document.styleSheets.length; i++) {
                    if (url && document.styleSheets[i].href.indexOf(url) === -1 ) {
                        continue;
                    }
                    if (media) {
                        var sheetMedia;
                        if (document.styleSheets[i].media.mediaText) {
                            sheetMedia = document.styleSheets[i].media.mediaText;
                        } else {
                            sheetMedia = document.styleSheets[i].media;
                        }
                        if (media !== sheetMedia) {
                            continue;
                        }
                    }
                    sheets.push(document.styleSheets[i]);
                }
            }

示例3:

   删除样式表

   示例代码:

function removeStylesheet(url, media) {
                var sheets = getStylesheet(url, media);
                for (var i = 0; i < sheets.length; i++) {
                    var node = sheets[i].ownerNode || sheets[i].owningElement;
                    sheets[i].disabled = true;
                    node.parentNode.removeChild(node);
                }
            }

示例4:

   增加一条CSS规则

   示例代码:

function addCssRule(selector, styles, index, url, meida) {
                var declaration = '';
                for (property in styles) {
                    if (!styles.hasOwnProperty(property)) {
                        continue;
                    }
                    declaration += property + ':' + styles[property] + ';';
                }
                var styleSheets = (typeof url === 'array') ? url : getStylesheet(url, media);
                var newIndex;
                for (var i = 0; i < styleSheets.length; i++) {
                    if (styleSheets[i].insertRule) {//DOM2
                        newIndex = index > 0 ? index : styleSheets[i].cssRules;
                        styleSheets[i].insertRule(selector + '{' + declaration + '}', newIndex);
                    } else if (styleSheets[i].addRule) {//MSIE
                        newIndex = index >= 0 ? index : -1;
                        styleSheets[i].addRule(selector, declaration, newIndex);
                    }
                }
            }

示例5:

   编辑一条css规则

   示例代码:

function editCssRule(selector, styles, url, media) {
                var styleSheets = (typeof url === 'array') ? url : getStylesheet(url, media);
                for (var i = 0; i < styleSheets.length; i++) {
                    var rules = styleSheets[i].cssRules || styleSheets[i].rules;
                    selector = selector.toUpperCase();
                    for (var j = 0; j < rules.length; j++) {
                        if (rules[j].selectorText.toUpperCase() === selector ) {
                            for (property in styles) {
                                if (!styles.hasOwnProperty(property)) {
                                    continue;
                                }
                                rules[j].style[camelize(property)] = styles[property];
                            }
                        }
                    }
                }
            }

 

2015-02-09——js笔记的更多相关文章

  1. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  2. Data Visualization and D3.js 笔记(1)

    课程地址: https://classroom.udacity.com/courses/ud507 什么是数据可视化? 高效传达一个故事/概念,探索数据的pattern 通过颜色.尺寸.形式在视觉上表 ...

  3. js笔记-0

    #js笔记-0 数组: indexOf方法: Array也可以通过indexOf()来搜索一个指定的元素的位置: var arr = [10, 20, '30', 'xyz']; arr.indexO ...

  4. Node.js 笔记02

    一.关于命令 常用命令: dir 列出当前目录下面所有的文件 cd 目录名 进入到指定的目录,. 当前目录, .. 进入上级目录,cd . 当前目录, cd .. 上级目录 md 目录名 创建文件夹 ...

  5. 2015年10月23日JS笔记

    ECMAScript标准:JavaScript核心语法 微软:Jscript ECMAScript标准:一纸空文 JavaScript和JScritp都号称完全实现了 ECMAScript标准 W3C ...

  6. JS笔记—02

    1.String截取:substr:截几位, substring:截到哪. 2.String的操作,例如变大写,小写,本身不会变,只是在栈里交换引用似的 var str = "hello w ...

  7. iOS 学习笔记 二 (2015.02.26)

    How To Use Git Source Control with Xcode in iOS 6 If you're new here, you may want to subscribe to m ...

  8. iOS 学习笔记 一 (2015.02.05)

    一:Xcode6输入框设置为 keyboard type设置为Number Pad弹不出键盘的解决办法   问题:Can't find keyplane that supports type 4 fo ...

  9. vue.js及项目实战[笔记]— 02 vue.js基础

    一. 基础 1. 注册全局组件 应用场景:多出使用的公共性能组件,就可以注册成全局组件,减少冗余代码 全局APIVue.component('组件名','组件对象') 2.附加功能:过滤器&监 ...

  10. 02 Node.js学习笔记之http服务

    在Node中可以非常轻松的构建一个Web服务器,在Node中提供了一个http模块,这个模块主要功能就是帮助你创建一个Web服务器. 创建步骤: //1.加载http模块 var http=requi ...

随机推荐

  1. Spring HibernateTemplate

    HibernateTemplate利用模板设计模式,可将重复的opensession getcurrentsession工作省去,只将必要操作执行即可,其它的由spring来帮我们处理.   < ...

  2. 阿里云创建RAM子账号

    操作步骤 创建子账号 主账号导航至 访问控制 > 用户管理 页面.如下图所示: 单击右上角的 新建用户,如下图所示: 填写弹出框的各配置项,如下图所示: 单击 确定,即可创建子账号. 允许子账号 ...

  3. VS2017、netcore版本更新升级

    VS2017 剩下的就是下一步了. netcore 访问:https://www.microsoft.com/net/download/archives 找到对应版本(最新版本) 下载安装就可以了 装 ...

  4. C++ 内存泄漏

    1. 内存泄漏: 在计算机科学中,内存泄漏指由于疏忽或错误造成程序未能释放已经不再使用的内存的情况. 内存泄漏并非指内存在物理上的消失,而是应用程序分配某段内存后,由于设计错误,导致在释放该段内存之前 ...

  5. chrome扩展(浏览器插件)开发实用教程

    原创文章,转载请注明出处. 作者:简体字丶冯; QQ:564372931 1.Chrome能搞这些事情 (1)     操作浏览器中打开的页面DOM 这能做什么哪?譬如说你想修改页面DOM(DOM是什 ...

  6. MySQL中的RAND()函数使用详解(order by rand() 随机查询取前几条记录)

    MySQL RAND()函数调用可以在0和1之间产生一个随机数: mysql> SELECT RAND( ), RAND( ), RAND( ); +------------------+--- ...

  7. nginx.conf 详细

    ##定义nginx运行的用户各用户组user nginx nginx; ##nginx进程数,建议设置与cpu核心数一致worker_processes 1; ##全局错误日志定义类型[ debug ...

  8. C++语言基础(2)-new和delete操作符

    在C语言中,动态分配内存用 malloc() 函数,释放内存用 free() 函数.如下所示: ); //分配10个int型的内存空间 free(p); //释放内存 在C++中,这两个函数仍然可以使 ...

  9. 解决Eclipse的dropins中svn插件不能加载的问题

    在eclipse的dropins中我们将svn的插件放到里边重启我们的ecplise就能正常加载svn插件了,如下图 但是有时候我们删除了svn的项目之后有可能我们的eclipse就不能正常加载svn ...

  10. FreeBSD Try to set MAKE_JOBS_UNSAFE=yes and rebuild before

    FreeBSD Try to set MAKE_JOBS_UNSAFE=yes and rebuild before,玛德,FreeBSD安装软件就是蛋疼~ mark In some ports th ...