JavaScript插入动态样式实现代码


Posted in Javascript onFebruary 22, 2012

与动态脚本类似,所谓动态样式是指在页面刚加载时不存在的样式;动态样式是在页面加载完成后动态添加到页面中。

我们以下面这个典型的<link>元素为例:

<link rel="stylesheet" type="text/css" href="style.css">使用DOM代码可以很容易的动态创建出这个元素:

var link = document.createElement("link"); 
link.rel = "stylesheet"; 
link.type = "text/css"; 
link.href = "style.css"; 
var head = document.getElementsByTagName("head")[0]; 
head.appendChild(link);

以上代码在所有主流浏览器中都可以正常运行。需要注意的是,必须将<link>元素添加到<head>而不是<body>元素,才能保证在所有浏览器中的行为一致。整个过程可以用一下函数来表示:
function loadStyles(url) { 
var link = document.createElement("link"); 
link.rel = "stylesheet"; 
link.type = "text/css"; 
link.href = url; 
var head = document.getElementsByTagName("head")[0]; 
head.appendChild(link); 
} 
loadStyles("style.css")

加载外部样式文件的过程是异步的,也就是加载样式与执行JavaScript代码的过程没有固定的次序。

另一种定义样式的方式是使用<style>元素来包含嵌入式CSS,如下所示:

<style>
body { background-color: red; }
</style>

按照相同的逻辑,下列DOM代码应该是有效的:

var style = document.createElement("style"); 
style.type = "text/css"; 
style.appendChild(document.createTextNode("body{background-color:red;}")); 
var head = document.getElementsByTagName("head")[0]; 
head.appendChild(style);

以上代码可以在Firefox、Safrai、Chrome和Opera中运行,在IE中则会报错。IE将<style>视为一个特殊的、与<script>类似的节点,不允许访问其子节点。事实上,IE此时抛出的错误与向<script>元素添加子节点时抛出的错误相同。解决IE中的这个问题的办法,就是访问元素的styleSheet属性,该属性又有一个cssText属性,可以接受CSS代码,如下面的例子所示:
var style = document.createElement("style"); 
style.type = "text/css"; 
try { 
style.appendChild(document.createTextNode("body{background-color:red}")); 
} catch (ex) { 
style.styleSheet.cssText = "body{background-color:red}"; 
} 
var head = document.getElementsByTagName("head")[0]; 
head.appendChild(style);

与动态添加嵌入式脚本类似,重写后的代码使用了try-catch语句来捕获IE抛出的错误,然后再使用针对IE的特殊方式来设置样式。一次通用的解决方案如下:
function loadStyleString(css) { 
var style = document.createElement("style"); 
style.type = "text/css"; 
try { 
style.appendChild(document.createTextNode(css)); 
} catch (ex) { 
style.styleSheet.cssText = css; 
} 
var head = document.getElementsByTagName("head")[0]; 
head.appendChild(style); 
} 
loadStyleString("body{background-color:red}");
Javascript 相关文章推荐
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
深入分析js的冒泡事件
Dec 05 Javascript
基于jquery css3实现点击动画弹出表单源码特效
Aug 31 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
JavaScript中最常见的三个面试题解析
Mar 04 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
Jun 13 Javascript
AngularJS实现进度条功能示例
Jul 05 Javascript
js异步编程小技巧详解
Aug 14 Javascript
es6学习之解构时应该注意的点
Aug 29 Javascript
vue fetch中的.then()的正确使用方法
Apr 17 Javascript
javascript插入样式实现代码
Feb 22 #Javascript
Javascript 中的 call 和 apply使用介绍
Feb 22 #Javascript
JS对象与JSON格式数据相互转换
Feb 20 #Javascript
js 代码优化点滴记录
Feb 19 #Javascript
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 #Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 #Javascript
jquery实现奇偶行赋值不同css值
Feb 17 #Javascript
You might like
php 正则匹配函数体
2009/08/25 PHP
JQuery的Ajax请求实现局部刷新的简单实例
2014/02/11 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
Vue路由history模式解决404问题的几种方法
2018/09/29 Javascript
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
微信小程序实现写入读取缓存详解
2019/08/30 Javascript
python中的函数用法入门教程
2014/09/02 Python
Python解析nginx日志文件
2015/05/11 Python
python制作花瓣网美女图片爬虫
2015/10/28 Python
深入解答关于Python的11道基本面试题
2017/04/01 Python
使用Python的turtle模块画图的方法
2017/11/15 Python
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
Python基于多线程实现抓取数据存入数据库的方法
2018/06/22 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
python实现修改固定模式的字符串内容操作示例
2019/12/30 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
Python Mock模块原理及使用方法详解
2020/07/07 Python
英国领先的独立时装店:Van Mildert
2019/10/28 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
端口镜像是怎么实现的
2014/03/25 面试题
银行简历自我评价
2014/02/11 职场文书
基本公共卫生服务健康教育工作方案
2014/05/22 职场文书
学校党委副书记个人对照检查材料思想汇报
2014/09/28 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
横店影视城导游词
2015/02/06 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
七年级作文之秋游
2019/10/21 职场文书
利用Nginx代理如何解决前端跨域问题详析
2021/04/02 Servers
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers