Javascript动态引用CSS文件的2种方法介绍


Posted in Javascript onJune 06, 2014

最近做一个项目,需要javascript动态插入样式,结果以前的方法失效了!查了2个小时的原因竟然是自己手贱,这个最后再说!

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搜索子元素的方法
Feb 10 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
基于javascript实现最简单的选项卡切换效果
May 16 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
Jun 06 Javascript
JS实现的自定义水平滚动字体插件完整实例
Jun 17 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
js使用i18n实现页面国际化的方法
May 09 Javascript
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 Javascript
vue中使用GraphQL的实例代码
Nov 04 Javascript
javascript 数组(list)添加/删除的实现
Dec 17 Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 Javascript
jquery 隐藏与显示tr标签示例代码
Jun 06 #Javascript
Node.js中对通用模块的封装方法
Jun 06 #Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 #Javascript
jquery修改网页背景颜色通过css方法实现
Jun 06 #Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
Jun 06 #Javascript
JavaScript也谈内存优化
Jun 06 #Javascript
Javascript中的delete操作符详细介绍
Jun 06 #Javascript
You might like
通过具体程序来理解PHP里面的抽象类
2010/01/28 PHP
php stream_get_meta_data返回值
2013/09/29 PHP
PHP如何实现Unicode和Utf-8编码相互转换
2015/07/29 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
php rmdir使用递归函数删除非空目录实例详解
2016/10/20 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
Jquery 例外被抛出且未被接住原因介绍
2013/09/04 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
node 利用进程通信实现Cluster共享内存
2017/10/27 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
实例详解Vue项目使用eslint + prettier规范代码风格
2018/08/20 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
读懂CommonJS的模块加载
2019/04/19 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
js对象简介与基本用法示例
2020/03/13 Javascript
Python实现代码统计工具(终极篇)
2016/07/04 Python
简单谈谈python中的语句和语法
2017/08/10 Python
python书籍信息爬虫实例
2018/03/19 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
销售经理工作职责范文
2013/12/03 职场文书
家长学校实施方案
2014/03/15 职场文书
一帮一活动总结
2014/05/08 职场文书
初中家长评语和期望
2014/12/26 职场文书