示例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. React Native : 自定义视图

    代码地址如下:http://www.demodashi.com/demo/11686.html 这次我们要做的仿 新闻头条 的首页的顶部标签列表,不要在意新闻内容. 请求数据 首先做顶部的目录视图,首 ...

  2. IOS下拉放大图片

    代码地址如下:http://www.demodashi.com/demo/11623.html 一.实现效果图 现在越来越多的APP中存在下拉放大图片的效果,今天贡献一下我的实现这种方法的原理,和我遇 ...

  3. select/poll/epoll原理探究及总结

    select,poll,epoll都是IO多路复用的机制.I/O多路复用就通过一种机制,可以监视多个描述符,一旦某个描述符就绪(一般是读就绪或者写就绪),能够通知程序进行相应的读写操作.但select ...

  4. hystrix-turbine实现多服务监控

    原文地址:http://www.cnblogs.com/skyblog/p/5633757.html 1.   概述 Demo地址:http://git.oschina.net/zhou666/spr ...

  5. centos7单机版安装hbase

    1.首先安装jdk1.8 yum install java-1.8.0-openjdk* -y 2.下载hbase 地址:http://mirrors.shuosc.org/apache/hbase/ ...

  6. 由"永恒之蓝"病毒而来的电脑知识科普

    永恒之蓝病毒事件: 继英国医院被攻击,随后在刚刚过去的5月12日晚上20点左右肆虐中国高校的WannaCry勒索事件,全国各地的高校学生纷纷反映,自己的电脑遭到病毒的攻击,文档被加密,壁纸遭到篡改,并 ...

  7. html块级元素与内联元素的区别

    1.  块级元素(block element): 概念理解:如果不用css控制,块级元素在文档流中以一行显示,及它所占的宽度为其父级元素所占的宽度,若超过宽度会重新另起一行显示,高度会随着内容高度的增 ...

  8. osx升级到10.10后,用pod install报错终于解决的方法

    先依照这个文章做:http://blog.csdn.net/dqjyong/article/details/37958067 大概过程例如以下: Open Xcode 6 Open Preferenc ...

  9. css中div标签不置顶

    设置div属性垂直对齐方式为:top <div style="vertical-align: top;"></div>

  10. eclipse 建立maven项目 显示红叉的解决方法

    1.建立好之后就会发现项目有红叉. 这时发现查查在main处,打开项目>属性>Java Build Path>source,发现里边有红叉(如下图),这是由于我们的src/main下 ...