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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
13个绚丽的Jquery 界面设计网站推荐
Sep 28 Javascript
JQuery实现用户名无刷新验证的小例子
Mar 22 Javascript
查看图片(前进后退)功能实现js代码
Apr 24 Javascript
jquery清空表单数据示例分享
Feb 13 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
详解jQuery中ajax.load()方法
Jan 25 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
使用 Vue 实现一个虚拟列表的方法
Aug 20 Javascript
解决vue组件中click事件失效的问题
Nov 09 Javascript
详解webpack的文件监听实现(热更新)
Sep 11 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 has encountered an Access Violation
2007/01/15 PHP
PHP入门教程之自定义函数用法详解(创建,调用,变量,参数,返回值等)
2016/09/11 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
基于php流程控制语句和循环控制语句(讲解)
2017/10/23 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
js实现延迟加载的方法
2015/06/24 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
解决URL地址中的中文乱码问题的办法
2017/02/10 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
js中!和!!的区别与用法
2020/05/09 Javascript
[49:31]TFT vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
Python专用方法与迭代机制实例分析
2014/09/15 Python
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
python多线程共享变量的使用和效率方法
2019/07/16 Python
Python3使用腾讯云文字识别(腾讯OCR)提取图片中的文字内容实例详解
2020/02/18 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
Python递归实现打印多重列表代码
2020/02/27 Python
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
SmartBuyGlasses英国:购买太阳镜和眼镜
2018/01/29 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
军训自我鉴定100字
2014/02/13 职场文书
廉洁使者实施方案
2014/03/29 职场文书
企业新年寄语
2014/04/04 职场文书
活动总结格式范文
2014/04/26 职场文书
十八大标语口号
2014/10/09 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
redis cluster支持pipeline的实现思路
2021/06/23 Redis