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 相关文章推荐
编程语言JavaScript简介
Oct 16 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
利用forever和pm2部署node.js项目过程
May 10 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
微信小程序 Animation实现图片旋转动画示例
Aug 22 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
单线程JavaScript实现异步过程详解
May 19 Javascript
vue - props 声明数组和对象操作
Jul 30 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 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
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
PHP中文件缓存转内存缓存的方法
2011/12/06 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
php实现等比例压缩图片
2018/07/26 PHP
jquery 图片轮换效果
2010/07/29 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
php 修改密码实现代码
2017/05/24 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
vue axios重复点击取消上一次请求封装的方法
2019/06/19 Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
2019/11/26 Javascript
简单谈谈python的反射机制
2016/06/28 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
python通过微信发送邮件实现电脑关机
2018/06/20 Python
python如何查看微信消息撤回
2018/11/27 Python
python命令行参数用法实例分析
2019/06/25 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
HTML5的标签的代码的简单介绍 HTML5标签的简介
2012/05/28 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
Super-Pharm波兰:药房和香水在一个地方
2020/08/18 全球购物
初中地理教学反思
2014/01/11 职场文书
小学生演讲稿
2014/01/12 职场文书
计算机学生求职信范文
2014/01/30 职场文书
法律六进活动方案
2014/03/13 职场文书
蓝颜请假条
2014/04/11 职场文书
一年级评语大全
2014/04/23 职场文书
经理任命书模板
2014/06/06 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android