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 相关文章推荐
js利用Array.splice实现Array的insert/remove
Jan 13 Javascript
不同浏览器对回车提交表单的处理办法
Feb 13 Javascript
各情景下元素宽高的获取实现代码
Sep 13 Javascript
jquery实现的下拉和收缩效果示例
Aug 21 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
js module大战
Apr 19 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
Sep 23 Javascript
vue 开发之路由配置方法详解
Dec 02 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生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
php创建多级目录与级联删除文件的方法示例
2019/09/12 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
javascript json2 使用方法
2010/03/16 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
2011/08/20 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
2013/01/11 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
jQuery制作仿Mac Lion OS滚动条效果
2015/02/10 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
pace.js和NProgress.js两个加载进度插件的一点小总结
2018/01/31 Javascript
JavaScript展开操作符(Spread operator)详解
2019/07/20 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
python实现简易版计算器
2020/06/22 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
python GUI库图形界面开发之PyQt5窗口布局控件QStackedWidget详细使用方法
2020/02/27 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
Django实现内容缓存实例方法
2020/06/30 Python
一个精品风格的世界:Atterley
2019/05/01 全球购物
信用社主任竞聘演讲稿
2014/05/23 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
升学宴家长答谢词
2015/09/29 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
python和anaconda的区别
2022/05/06 Python