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 相关文章推荐
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
May 07 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
ExpressJS入门实例
Jan 14 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
jquery实现表格隔行换色效果
Nov 19 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
记录一篇关于redux-saga的基本使用过程
Aug 18 Javascript
微信小程序中显示倒计时代码实例
May 09 Javascript
js实现橱窗展示效果
Jan 11 Javascript
Js图片点击切换轮播实现代码
Jul 27 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写UltraEdit插件脚本实现方法
2011/12/26 PHP
js window.onload 加载多个函数的方法
2009/11/02 Javascript
JavaScript 对Cookie 操作的封装小结
2009/12/31 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
js获取当月最后一天实例代码
2013/11/19 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
2016/12/26 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
vue+elementUI(el-upload)图片压缩,默认同比例压缩操作
2020/08/10 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
python实现基本进制转换的方法
2015/07/11 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
解读python如何实现决策树算法
2018/10/11 Python
解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题
2019/07/15 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
python3 enum模块的应用实例详解
2019/08/12 Python
python xlwt如何设置单元格的自定义背景颜色
2019/09/03 Python
在python中计算ssim的方法(与Matlab结果一致)
2019/12/19 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
北京银河万佳Java面试题
2012/03/21 面试题
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS