javascript插入样式实现代码


Posted in Javascript onFebruary 22, 2012

javascript插入样式在前端开发中应用比较广泛,特别是在修改前端表现和页面换肤的时候。最近做的这个任务是用户在别人的站点上点击一个按钮,就会在别的站点页面下插入一个脚本,执行,这其中包含了样式的插入。

一般情况下javascript动态插入样式有两种,一种页面中引入外部样式,在<head>中使用<link>标签引入一个外部样式文件,另一种是在页面中使用<style>标签插入页面样式(这里说的不是style属性)。
一、页面中引入外部样式:
在<head>中使用<link>标签引入一个外部样式文件,这个比较简单,各个主流浏览器也不存在兼容性问题:

function includeLinkStyle(url) { 
var link = document.createElement("link"); 
link.rel = "stylesheet"; 
link.type = "text/css"; 
link.href = url; 
document.getElementsByTagName("head")[0].appendChild(link); 
} 
includeLinkStyle("http://css.3water.com/home/css/reset.css?v=20101227");

但是在我目前做的这个项目中本身应用的样式非常少,直接用引入一个外部样式文件似乎不合适,所以我选择了第二种方案,在页面中使用<style>标签插入页面样式。
二、使用<style>标签插入页面样式:
这种方式在各个主流浏览器存在兼容性问题,像firefox等标准浏览器无法直接获取设置styleSheet的cssText值,标准浏览器下只能使用document.styleSheets[0].cssRules[0].cssText单个获取样式;同时使用:document.styleSheets[0].cssRules[0].cssText=newcssText;页面不会自动更新样式,必须使用:document.styleSheets[0].cssRules[0].style.cssText=newcssText;这点似乎没坑爹的IE来的人性化和简便。YUI中使用了一个很好的办法:style.appendChild(document.createTextNode(styles));采用createTextNode将样式字符串添加到<style>标签内;
function includeStyleElement(styles,styleId) { 
if (document.getElementById(styleId)) { 
return 
} 
var style = document.createElement("style"); 
style.id = styleId; 
//这里最好给ie设置下面的属性 
/*if (isIE()) { 
style.type = "text/css"; 
style.media = "screen" 
}*/ 
(document.getElementsByTagName("head")[0] || document.body).appendChild(style); 
if (style.styleSheet) { //for ie 
style.styleSheet.cssText = styles; 
} else {//for w3c 
style.appendChild(document.createTextNode(styles)); 
} 
} 
var styles = "#div{background-color: #FF3300; color:#FFFFFF }"; 
includeStyleElement(styles,"newstyle");

这样页面中的元素就能直接应用样式了,不管你的这些元素是不是通过脚本追加的。
关于手贱:
看这段代码:
var divObj = document.createElement("div"); 
divObj .id = "__div"; 
divObj .innerHTML="测试js插入DOM和样式"; 
document.body.appendChild(divObj ); 
var styles = "#__div{background-color: #FF3300; color:#FFFFFF }"; 
includeStyleElement(styles,"newstyle");

前面说了这个项目是用户在别人的站点上点击一个按钮,就会在别的站点页面下插入一个脚本,执行,这其中包含了样式的插入,我为了尽可能的保证我创建的元素ID唯一性,手贱在元素ID前加了“__”,表示私有防止冲突。结果悲剧了,IE6,IE7 class和id的命名不能以下划线开头(“_”),竟然把这个给忘了!花了两个小时才找到原因。悲剧啊!得出一个结论!
Javascript 相关文章推荐
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
jquery load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
Bootstrap前端开发案例二
Jun 17 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
Jun 21 Javascript
原生js实现放大镜效果
Jan 11 Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 Javascript
微信小程序日历弹窗选择器代码实例
May 09 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
Jun 18 Javascript
原生js实现五子棋游戏
May 28 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
qTip2 精致的基于jQuery提示信息插件
Feb 17 #Javascript
You might like
php字符串按照单词进行反转的方法
2015/03/14 PHP
万能的php分页类
2017/07/06 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
解决iframe的frameborder在chrome/ff/ie下的差异
2010/08/12 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
js对象基础实例分析
2015/01/13 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
2016/06/16 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
Ionic学习日记实现验证码倒计时
2018/02/08 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
Python中的descriptor描述器简明使用指南
2016/06/02 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
pyqt5 使用cv2 显示图片,摄像头的实例
2019/06/27 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
Python读写压缩文件的方法
2020/07/30 Python
Django数据统计功能count()的使用
2020/11/30 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
应聘医学检验人员自荐信
2013/09/27 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
《槐乡五月》教学反思
2014/04/25 职场文书
学习十八大演讲稿
2014/09/15 职场文书
导游词400字
2015/02/13 职场文书