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 相关文章推荐
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
javascript 快速排序函数代码
May 30 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
layui 表格的属性的显示转换方法
Aug 14 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 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
中英文字符串翻转函数
2008/12/09 PHP
最新用php获取谷歌PR值算法,附上php查询PR值代码示例
2011/12/25 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
php连接oracle数据库的核心步骤
2016/05/26 PHP
php多线程并发实现方法
2016/09/30 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
js 目录列举函数
2008/11/06 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
简介AngularJS的HTML DOM支持情况
2015/06/17 Javascript
浅谈JavaScript中的string拥有方法的原因
2015/08/28 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
haskell实现多线程服务器实例代码
2013/11/26 Python
python里将list中元素依次向前移动一位
2014/09/12 Python
Python 实现简单的电话本功能
2015/08/09 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
信息与计算科学专业推荐信
2014/02/23 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
导游词300字
2015/02/13 职场文书
储备店长岗位职责
2015/04/14 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
小学教师暑期培训心得体会
2016/01/09 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
导游词之珠海轮廓
2019/10/25 职场文书
MySQL查看表和清空表的常用命令总结
2021/05/26 MySQL