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+json 通用三级联动下拉列表
Apr 19 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 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 程序员的调试技术小结
2009/11/15 PHP
php empty() 检查一个变量是否为空
2011/11/10 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
让FireFox支持innerText的实现代码
2009/12/01 Javascript
js null undefined 空区别说明
2010/06/13 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
2010/11/30 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
JS实现文字放大效果的方法
2015/03/03 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
jQuery基于muipicker实现仿ios时间选择
2016/02/22 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
2019/04/02 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
Django实现CAS+OAuth2的方法示例
2019/10/30 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
python代码如何注释
2020/06/01 Python
is_file和file_exists效率比较
2021/03/14 PHP
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
施惠特软件测试面试题以及笔试题
2015/05/13 面试题
开办加工厂创业计划书
2014/01/03 职场文书
倡议书格式
2014/04/14 职场文书
卫校毕业生个人自我鉴定
2014/04/28 职场文书
申论倡议书范文
2014/05/13 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
党的群众路线教育实践活动整改落实情况自查报告
2014/10/28 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
css弧边选项卡的项目实践
2023/05/07 HTML / CSS