示例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. Cron表达式中特殊字符解释

    http://www.cnblogs.com/opaljc/archive/2012/05/24/2516392.htmlCron表达式的时间字段除允许设置数值外,还可使用一些特殊的字符,提供列表.范 ...

  2. chrome 非安全模式解决开发跨域问题

    这个参数可以降低chrome浏览器的安全性,禁用同源策略,利于开发人员本地调试. ps:如果是mac用户(记得 Command + Q 关闭chrome):  open -a Google\ Chro ...

  3. [容器]python搭建简易服务器+docker导入多个镜像shell脚本

    从其他机器导出来的docker镜像,集中地放在某台上,其他的机器执行 curl xxx:8000/load_images.sh 来导入镜像,简单方便 使用python简易web服务器. (在镜像目录下 ...

  4. Java synchronized详解(java 线程同步)

    http://www.cnblogs.com/devinzhang/archive/2011/12/14/2287675.html

  5. 李洪强漫谈iOS开发[C语言-001]-开发概述

  6. Jenkins安装和配置系列

    转自:http://www.cnblogs.com/zz0412/tag/jenkins/default.html?page=1 Jenkins进阶系列之——18Jenkins语言本地化    Jen ...

  7. Vue 组件6内联模板

    如果子组件有inline-template特性,组件将把它的内容当做模板,而不是把它当做分发内容,这样模板更灵活. <my-component inline-template> <d ...

  8. IOS设计模式的六大设计原则之单一职责原则(SRP,Single Responsibility Principle)

    定义 就一个类而言,应该仅有一个引起它变化的原因. 定义解读 这是六大原则中最简单的一种,通俗点说,就是不存在多个原因使得一个类发生变化,也就是一个类只负责一种职责的工作. 优点 类的复杂度降低,一个 ...

  9. LeetCode406. Queue Reconstruction by Height Add to List

    Description Suppose you have a random list of people standing in a queue. Each person is described b ...

  10. BitMap、Geo、HyperLogLog

    前言 Reids 在 Web 应用的开发中使用非常广泛,几乎所有的后端技术都会有涉及到 Redis 的使用.Redis 种除了常见的字符串 String.字典 Hash.列表 List.集合 Set. ...