jQuery动态加载css文件实现方法


Posted in Javascript onJune 15, 2016

有时我们可能会需要使用 jQuery 来加载一个外部的 css 文件,如在切换页面布局时。思路是创建一个 link 元素,并将它添加到 标记中即可,下边首先看看怎么使用 jQuery 来实现。

下边是我喜欢的写法:

$("<link>")
.attr({ rel: "stylesheet",
type: "text/css",
href: "site.css"
})
.appendTo("head");

有些朋友可能会使用下边的写法,只是形式有些小差异(append appendTo),原理还是一样的。

$("head").append("<link>");
css = $("head").children(":last");
css.attr({
rel: "stylesheet",
type: "text/css",
href: "/Content/Site.css"
});

最后,有的朋友可能希望直接在 javascript 中使用,方法如下:

function addCSS() {
var link = document.createElement('link');
link.type = 'text/css';
link.rel = 'stylesheet';
link.href = '/Content/Site.css';
document.getElementsByTagName("head")[0].appendChild(link);
}

如果是在 web 交互时,我们可以使用上述的方法通过 jQuery 或者 javascript 来引入一个 css 文件,否则还是建议使用原始的方法。

下面我还介绍一个可加载js,css的实例

代码如下

$.extend({
includePath: '',
include: function(file) {
var files = typeof file == "string" ? [file]:file;
for (var i = 0; i < files.length; i++) {
var name = files[i].replace(/^s|s$/g, "");
var att = name.split('.');
var ext = att[att.length - 1].toLowerCase();
var isCSS = ext == "css";
var tag = isCSS ? "link" : "script";
var attr = isCSS ? " type='text/css' rel='stylesheet' " : " language='javascript' type='text/javascript' ";
var link = (isCSS ? "href" : "src") + "='" + $.includePath + name + "'";
if ($(tag + "[" + link + "]").length == 0) document.write("<" + tag + attr + link + "></" + tag + ">");
}
}
});
//使用方法
$.includePath = 'http://hi.xxx/javascript/'; 
$.include(['json2.js', 'jquery.tree.js', 'jquery.tree.css']);

一个完整的实例

index.html

<!-- Created by Barrett at RRPowered.com -->
<!-- File name index.html -->
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax
/libs/jquery/1.4.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="default.css">
<title>A simple jQuery image slide</title>
<script type="text/javascript">
$(function(){
$(".theme").click(function(){
var theme=$(this).attr("rel");
$("link").attr("href",$(this).attr('rel'));
$("head").append("<link>");
});
});
</script>
</head>
<body>
<div class="theme" rel="blue.css">Blue</div>
<div class="theme" rel="orange.css">Orange</div>
<div class="theme" rel="yellow.css">Yellow</div>
<div class="theme" rel="default.css">Default</div>
<div class="container">
<div class="menu">Tab1 Tab2 Tab3 Tab4 Tab5</div>
<div class="inner">
Lorem ipsum dolor sit amet
</div>
<div class="footer">copyright yoursite 2011</div>
</div>
</body>
</html>
default.css
body{
background-color:#ffffff;
font-family:"arial";
}
.theme{
margin:10px;
width:70px;
padding:5px;
text-align:center;
background-color:#BEF781;
border:solid #333333 1px;
color:#444444;
font-weight:bold;
cursor:pointer;
}
.container{
margin-left:auto;
margin-right:auto;
width:700px;
}
.inner{
padding:20px;
border:solid #333333 1px;
}
.menu{
background-color:#f2f2f2;
padding:10px;
font-weight:bold;
}
.footer{
background-color:#f9f9f9;
padding:5px;
}
blue.css
body{
background-color:#2E9AFE;
font-family:"arial";
}
.theme{
margin:10px;
width:70px;
padding:5px;
text-align:center;
background-color:#BEF781;
border:solid #333333 1px;
color:#444444;
font-weight:bold;
cursor:pointer;
}
.container{
margin-left:auto;
margin-right:auto;
width:700px;
}
.inner{
padding:20px;
border:solid #333333 1px;
background-color:#58ACFA;
color:#ffffff;
}
.menu{
background-color:#f2f2f2;
padding:10px;
font-weight:bold;
}
.footer{
background-color:#f9f9f9;
padding:5px;
}
yellow.css
body{
background-color:#F7FE2E;
font-family:"arial";
}
.theme{
margin:10px;
width:70px;
padding:5px;
text-align:center;
background-color:#BEF781;
border:solid #333333 1px;
color:#444444;
font-weight:bold;
cursor:pointer;
}
.container{
margin-left:auto;
margin-right:auto;
width:700px;
}
.inner{
padding:20px;
border:solid #333333 1px;
background-color:#f6f6f6;
}
.menu{
background-color:#F2F5A9;
padding:10px;
font-weight:bold;
}
.footer{
background-color:#F2F5A9;
padding:5px;
}
orange.css
body{
background-color:#FE9A2E;
font-family:"arial";
}
.theme{
margin:10px;
width:70px;
padding:5px;
text-align:center;
background-color:#BEF781;
border:solid #333333 1px;
color:#444444;
font-weight:bold;
cursor:pointer;
}
.container{
margin-left:auto;
margin-right:auto;
width:700px;
}
.inner{
padding:20px;
background-color:#F7BE81;
color:#404040;
}
.menu{
background-color:#ffffff;
padding:10px;
font-weight:bold;
color:#FFBF26;
}
.footer{
background-color:#ffffff;
padding:5px;
color:#FFBF26;
}
Javascript 相关文章推荐
JQuery 前台切换网站的样式实现
Jun 22 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
Apr 17 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
angularjs中使用ng-bind-html和ng-include的实例
Apr 28 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
Sep 28 Javascript
10个在JavaScript开发中常遇到的BUG
Dec 18 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
Aug 07 Javascript
layui实现根据table数据判断按钮显示情况的方法
Sep 26 Javascript
Vue使用虚拟dom进行渲染view的方法
Dec 26 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 Javascript
理解JavaScript中的Proxy 与 Reflection API
Sep 21 Javascript
异步加载JS、CSS代码(推荐)
Jun 15 #Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 #Javascript
漫谈JS引擎的运行机制 你应该知道什么
Jun 15 #Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 #Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 #Javascript
JS封装的自动创建表格的实现代码
Jun 15 #Javascript
基于JavaScript代码实现自动生成表格
Jun 15 #Javascript
You might like
快速开发一个PHP扩展图文教程
2008/12/12 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
PHP编写RESTful接口的方法
2016/02/21 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
基于jQuery实现收缩展开功能
2016/03/18 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
vue-router判断页面未登录自动跳转到登录页的方法示例
2018/11/04 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
[04:01]2014DOTA2国际邀请赛 TITAN告别Ohaiyo期望明年再战
2014/07/15 DOTA
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
Python中列表(list)操作方法汇总
2014/08/18 Python
仅利用30行Python代码来展示X算法
2015/04/01 Python
使用Python的Zato发送AMQP消息的教程
2015/04/16 Python
在SAE上部署Python的Django框架的一些问题汇总
2015/05/30 Python
Python 实现简单的电话本功能
2015/08/09 Python
使用Python的Scrapy框架十分钟爬取美女图
2016/12/26 Python
python计算auc指标实例
2017/07/13 Python
Python基于递归算法求最小公倍数和最大公约数示例
2018/07/27 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
《童趣》教学反思
2014/02/19 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
教师演讲稿大全
2014/05/16 职场文书
行政申诉状范文
2015/05/20 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书