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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
使用纯javascript实现经典扫雷游戏
Apr 23 Javascript
JQuery+CSS实现图片上放置按钮的方法
May 29 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
Jun 18 Javascript
原生js实现返回顶部缓冲效果
Jan 18 Javascript
vue双向绑定简要分析
Mar 23 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
Vue中使用webpack别名的方法实例详解
Jun 19 Javascript
node.JS二进制操作模块buffer对象使用方法详解
Feb 06 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
这东西价格,可以买几台TECSUN S-2000
2021/03/02 无线电
php Try Catch异常测试
2009/03/01 PHP
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
php无限极分类递归排序实现方法
2014/11/11 PHP
php制作简单模版引擎
2016/04/07 PHP
PHP实现RSA签名生成订单功能【支付宝示例】
2017/06/06 PHP
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
禁止你的左键复制实用技巧
2013/01/04 Javascript
用按钮控制iframe显示的网页实现方法
2013/02/04 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
javascript实现二叉树遍历的代码
2017/06/08 Javascript
Vue keep-alive实践总结(推荐)
2017/08/31 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
2019/12/16 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
浅谈python for循环的巧妙运用(迭代、列表生成式)
2017/09/26 Python
python制作图片缩略图
2019/04/30 Python
python3+PyQt5 创建多线程网络应用-TCP客户端和TCP服务器实例
2019/06/17 Python
Python Pandas中根据列的值选取多行数据
2019/07/08 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
Python try except异常捕获机制原理解析
2020/04/18 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
html5 touch事件实现页面上下滑动效果【附代码】
2016/03/10 HTML / CSS
城市轨道专业个人求职信范文
2013/09/23 职场文书
教师节横幅标语
2014/10/08 职场文书
网络舆情信息简报
2015/07/21 职场文书
小学三年级语文教学反思
2016/03/03 职场文书