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 相关文章推荐
javascript开发随笔二 动态加载js和文件
Nov 25 Javascript
js绑定事件this指向发生改变的问题解决方法
Apr 23 Javascript
javascript获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
js几秒以后倒计时跳转示例
Dec 26 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
jquery中ajax使用error调试错误的方法
Feb 08 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
jquery实现Slide Out Navigation滑出式菜单效果代码
Sep 07 Javascript
浅谈vue中.vue文件解析流程
Apr 24 Javascript
js实现京东秒杀倒计时功能
Jan 21 Javascript
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
vue+element搭建后台小总结 el-dropdown下拉功能
Apr 10 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 a simple smtp class
2007/11/26 PHP
基于PHP对XML的操作详解
2013/06/07 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
PHP安全上传图片的方法
2015/03/21 PHP
PHP之预定义接口详解
2015/07/29 PHP
javascript Math.random()随机数函数
2009/11/04 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
Jquery判断IE6等浏览器的代码
2011/04/05 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
详解Node.js实现301、302重定向服务
2017/04/07 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
jQuery实现遍历XML节点和属性的方法示例
2018/04/29 jQuery
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
Openlayers绘制聚合标注
2020/09/28 Javascript
Python使用lxml模块和Requests模块抓取HTML页面的教程
2016/05/16 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
绘儿乐产品官方在线商店:Crayola.com
2019/09/07 全球购物
竞聘上岗演讲稿范文
2014/01/10 职场文书
2014的自我评价
2014/01/13 职场文书
《鞋匠的儿子》教学反思
2014/03/02 职场文书
房产公证书范本
2014/04/10 职场文书
体育教师求职信
2014/06/30 职场文书
浅谈Python数学建模之固定费用问题
2021/06/23 Python
解决vue-router的beforeRouteUpdate不能触发
2022/04/14 Vue.js
SQL bool盲注和时间盲注详解
2022/07/23 SQL Server
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS