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的回到页面顶部按钮
Jun 27 Javascript
Jquery Change与bind事件代码
Sep 29 Javascript
jquery选择checked在ie8普通模式下的问题
Feb 12 Javascript
使用 js+正则表达式为关键词添加链接
Nov 11 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
JavaScript定义全局对象的方法示例
Jan 12 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
一文了解Vue中的nextTick
May 06 Javascript
webpack 最佳配置指北(推荐)
Jan 07 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
PHP类与对象后期静态绑定操作实例详解
2018/12/20 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
移动设备web开发首选框架:zeptojs介绍
2015/01/29 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
jQuery使用$.each遍历json数组的简单实现方法
2016/04/18 Javascript
flag和jq on 的绑定多个对象和方法(必看)
2017/02/27 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
Django与Vue语法的冲突问题完美解决方法
2017/12/14 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python内置的字符串处理函数整理
2013/01/29 Python
python抓取百度首页的方法
2015/05/19 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
Python学习_几种存取xls/xlsx文件的方法总结
2018/05/03 Python
python爬取哈尔滨天气信息
2018/07/14 Python
Python+OpenCV图片局部区域像素值处理详解
2019/01/23 Python
python接口自动化如何封装获取常量的类
2019/12/24 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
django queryset相加和筛选教程
2020/05/18 Python
python 图像插值 最近邻、双线性、双三次实例
2020/07/05 Python
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
主题教育活动总结
2014/05/05 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
SQL Server2019数据库备份与还原脚本,数据库可批量备份
2021/11/20 SQL Server
Pandas搭配lambda组合使用详解
2022/01/22 Python
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python