示例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. iOS 转盘动画效果实现

    代码地址如下:http://www.demodashi.com/demo/11598.html 近期公司项目告一段落,闲来无事,看到山东中国移动客户端有个转盘动画挺酷的.于是试着实现一下,看似简单,可 ...

  2. mongoDB group命令详解

    http://heipark.iteye.com/blog/1167948       http://rjhym.iteye.com/blog/1224200 http://blog.163.com/ ...

  3. cURL命令行工具请求网页

    http://curl.haxx.se/download.html curl非常博大,用户要想使用好这个工具,除了详细学习参数之外,还需要深刻理解http的各种协议与URL的各个语法. 这里推荐几个读 ...

  4. Angularjs学习笔记3_datepicker

    1.使用jquery-ui +angular      <script src="http://libs.useso.com/js/jquery/1.11.1/jquery.js&qu ...

  5. 阿里云RDS备份的tar格式包恢复到本地自建数据库

    说明 阿里云RDS-mysql数据库是通过percona-Xtrabackup进行备份的,所以恢复时也需要安装该软件. 另外注意的是:你自己下载的MySQL版本要和阿里云上的MySQL版本一致,不然会 ...

  6. netty通用解码器LengthFieldBasedFrameDecoder

    2.2.4. LengthFieldBasedFrameDecoder解码器 了解TCP通信机制的读者应该都知道TCP底层的粘包和拆包,当我们在接收消息的时候,显示不能认为读取到的报文就是个整包消息, ...

  7. Building Maintainable Software-java篇之Separate Concerns in Modules

    Building Maintainable Software-java篇之Separate Concerns in Modules   In a system that is both complex ...

  8. 分布式服务框架 Zookeeper(四)官方编程指南

    握草,是不是加了官方两个字就可以唬人了. 使用ZooKeeper开发分布式应用 简介 这篇文档是为了那些想利用ZooKeeper的协调服务来构建分布式应用的开发人员而写滴,不相干的走一边去哈.在这儿有 ...

  9. linux服务器宕机分析/性能瓶颈分析

    linux服务器宕机分析/性能瓶颈分析   服务器宕机原因很多,资源不足.应用.硬件.系统内核bug等,以下一个小例子 服务器宕机了,首先得知道服务器宕机的时间点,然后分析日志查找原因 1.last ...

  10. Java中常见数据结构

    1:集合 Collection(单列集合) List(有序,可重复) ArrayList 底层数据结构是数组,查询快,增删慢 线程不安全,效率高 Vector 底层数据结构是数组,查询快,增删慢 线程 ...