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 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
Aug 31 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 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获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
jQuery 渐变下拉菜单
2009/12/15 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
浅谈jQuery中对象遍历.eq().first().last().slice()方法
2014/11/26 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
JS实现自动切换文字的导航效果代码
2015/08/27 Javascript
JS实现搜索框文字可删除功能
2016/12/28 Javascript
微信小程序开发教程-手势解锁实例
2017/01/06 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
[42:04]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第一局
2016/03/03 DOTA
python socket网络编程步骤详解(socket套接字使用)
2013/12/06 Python
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
深入理解Python中字典的键的使用
2015/08/19 Python
python各种语言间时间的转化实现代码
2016/03/23 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
TensorFlow实现Batch Normalization
2018/03/08 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
详解python列表生成式和列表生成式器区别
2019/03/27 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
django将网络中的图片,保存成model中的ImageField的实例
2019/08/07 Python
Django Admin中增加导出CSV功能过程解析
2019/09/04 Python
Windows下Sqlmap环境安装教程详解
2020/08/04 Python
python try...finally...的实现方法
2020/11/25 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
MediaMarkt比利时:欧洲最大电器连锁店
2020/12/21 全球购物
XML文档面试题
2015/08/05 面试题
高二历史教学反思
2014/01/25 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
《猴王出世》教学反思
2016/02/23 职场文书