示例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. CKEditor的安装与基本使用(JSP)

    文章分类:Web前端 一.下载CKEditor 1. 直接下载地址.当前最新版本号为3.5: http://download.cksource.com/CKEditor/CKEditor/CKEdit ...

  2. NIO之直接缓冲区与非直接缓冲区

    直接缓冲区与非直接缓冲区的概念 一.非直接缓冲区 1)创建方式 通过 static ByteBuffer allocate(int capacity) 创建的缓冲区,在JVM中内存中创建,在每次调用基 ...

  3. Atitit.android webview h5运行环境总结

    Atitit.android webview h5运行环境总结 1. WebView 的使用1 2. Js调用java1 3. Js调用java 跟个swt的比较2 3.1. Swt是BrowserF ...

  4. Navicat for MySQL 之数据库迁移

    1.将数据库下的表迁移出来 2.将表全部迁入另一个数据库 重新连接数据库看看吧!

  5. 李洪强-CALayer4-自定义层

    自定义层,其实就是在层上绘图,一共有2种方法,下面详细介绍一下. 一.自定义层的方法1 方法描述:创建一个CALayer的子类,然后覆盖drawInContext:方法,使用Quartz2D API进 ...

  6. iOS 学习笔记七 【博爱手把手教你使用2016年gitHub Mac客户端】

    iOS 学习笔记七 [博爱手把手教你使用gitHub客户端] 第一步:首先下载git客户端 链接:https://desktop.github.com 第二步:fork 大神的代码[这里以我的代码为例 ...

  7. UVA 679 Dropping Balls 由小见大,分析思考 二叉树放小球,开关翻转,小球最终落下叶子编号。

    A number of K balls are dropped one by one from the root of a fully binary tree structure FBT. Each ...

  8. OpenCV中的SURF算法介绍

    SURF:speed up robust feature,翻译为快速鲁棒特征.首先就其中涉及到的特征点和描述符做一些简单的介绍: 特征点和描述符 特征点分为两类:狭义特征点和广义特征点.狭义特征点的位 ...

  9. 集合映射Set(使用xml文件)

    如果持久类具有Set对象,可以在映射文件中使用set元素映射Set集合. set元素不需要索引元素. List和Set之间的区别是: Set只存储唯一的值. 我们来看看我们如何在映射文件中实现集合: ...

  10. chrome 设置代理服务器

    通过设置google chrome浏览器的代理服务器可以让google chrome浏览器通过代理服务器上网,可以隐藏本机的IP地址或者访问一些不能直接访问的网站. 工具/原料   google ch ...