无为清净楼资源网 Design By www.qnjia.com
写组件时有时想把一些组件特性相关的 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); } }();
以上就是JavaScript动态插入CSS的方法,希望对大家的学习有所帮助。
标签:
javascript,CSS
无为清净楼资源网 Design By www.qnjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
暂无评论...
更新日志
2024年11月20日
2024年11月20日
- 凤飞飞《浮世情怀》HQCD[正版原抓WAV+CUE]
- 群星《奔赴!万人现场 第3期》[FLAC/分轨][537.75MB]
- 群星 《2024好听新歌23》十倍音质 U盘音乐 [WAV分轨][1.6G]
- 群星《妙音纪念珍藏版》蓝光BSCD[WAV+CUE][1G]
- 【发烧试音】蔡克信严讯人间天籁》[原抓WAV+CUE]
- [ABC唱片]山姆泰勒《西电之声·萨克斯风》[低速原抓WAV+CUE]
- 童丽《微风细雨XRCD2》[原抓WAV+CUE]
- 群星 《车乐坊1》DTS魔音[WAV+CUE][1.7G]
- 邓丽君.2024 -《生誕70年ベスト?アルバム 沒後30年》环球日版 [WAV+分轨][993M]
- 群星《一人一首成名曲》1998 台湾金碟珍藏版[WAV+CUE][1.1G]
- 陈百强2024-《凝望》头版限量编号MQA-UHQCD[WAV+CUE]
- 测试示范《监听天碟3》头版限量编号LECD[WAV+CUE]
- 陈瑞《爱你到天荒地老HQ》头版限量[低速原抓WAV+CUE]
- 徐小凤 《徐小凤殿堂18首》24K金碟[WAV+CUE]
- 保时捷原厂车载爆棚动态试音碟《Panamera_Soundtrack》DTS[WAV分轨][1G]