这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JavaScript 动态插入 CSS 的方法,两个步骤就可以实现 JavaScript 动态插入 CSS
写组件时有时想把一些组件特性相关的 CSS 样式封装在 JS 里,这样更内聚,改起来方便。JS 动态插入 CSS 两个步骤: 创建 1、一个 style 对象 2、使用 stylesheet 的 insertRule 或 addRule 方法添加样式
一、查看样式表
先看下 document.styleSheets,随意打开一个页面
其中前三个是通过 link 标签引入的 CSS 文件,第四个是通过 style 标签内联在页面里的 CSS。有如下属性
每一个 cssRule 又有如下属性
其中的 cssText 正是写在 style 的源码。
二、动态插入 CSS 首先,需要创建一个 style 对象,返回其 stylesheet 对象
- /*
- * 创建一个 style, 返回其 stylesheet 对象
- * 注意:IE6/7/8中使用 style.stylesheet,其它浏览器 style.sheet
- */
- function createStyleSheet() {
- var head = document.head || document.getElementsByTagName('head')[0];
- var style = document.createElement('style');
- style.type = 'text/css';
- head.appendChild(style);
- return style.sheet ||style.styleSheet;
- }
添加函数 addCssRule 如下
- /*
- * 动态添加 CSS 样式
- * @param selector {string} 选择器
- * @param rules {string} CSS样式规则
- * @param index {number} 插入规则的位置, 靠后的规则会覆盖靠前的
- */
- function addCssRule(selector, rules, index) {
- index = index || 0;
- if (sheet.insertRule) {
- sheet.insertRule(selector + "{" + rules + "}", index);
- } else if (sheet.addRule) {
- sheet.addRule(selector, rules, index);
- }
- }
需要注意,标准浏览器支持 insertRule, IE 低版本则支持 addRule。 完整代码如下
- /*
- * 动态添加 CSS 样式
- * @param selector {string} 选择器
- * @param rules {string} CSS样式规则
- * @param index {number} 插入规则的位置, 靠后的规则会覆盖靠前的
- */
- var addCssRule = function() {
- // 创建一个 style, 返回其 stylesheet 对象
- // 注意:IE6/7/8中使用 style.stylesheet,其它浏览器 style.sheet
- function createStyleSheet() {
- var head = document.head || document.getElementsByTagName('head')[0];
- var style = document.createElement('style');
- style.type = 'text/css';
- head.appendChild(style);
- return style.sheet ||style.styleSheet;
- }
- // 创建 stylesheet 对象
- var sheet = createStyleSheet();
- // 返回接口函数
- return function(selector, rules, index) {
- index = index || 0;
- if (sheet.insertRule) {
- sheet.insertRule(selector + "{" + rules + "}", index);
- } else if (sheet.addRule) {
- sheet.addRule(selector, rules, index);
- }
- }
- }();
如果只支持移动端或现代浏览器,可以去掉低版本 IE 判断的代码
- /*
- * 动态添加 CSS 样式
- * @param selector {string} 选择器
- * @param rules {string} CSS样式规则
- * @param index {number} 插入规则的位置, 靠后的规则会覆盖靠前的,默认在后面插入
- */
- var addCssRule = function() {
- // 创建一个 style, 返回其 stylesheet 对象
- function createStyleSheet() {
- var style = document.createElement('style');
- style.type = 'text/css';
- document.head.appendChild(style);
- return style.sheet;
- }
- // 创建 stylesheet 对象
- var sheet = createStyleSheet();
- // 返回接口函数
- return function(selector, rules, index) {
- index = index || 0;
- sheet.insertRule(selector + "{" + rules + "}", index);
- }
- }();
来源: http://www.phperz.com/article/17/0410/268181.html