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 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
js event事件的传递与冒泡处理
Dec 06 Javascript
iframe子页面获取父页面元素的方法
Nov 05 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
Javascript随机标签云代码实例
Jun 21 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
vue的Virtual Dom实现snabbdom解密
May 03 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
May 09 jQuery
jQuery提示框插件SweetAlert用法分析
Aug 05 jQuery
Vue中实现回车键切换焦点的方法
Feb 19 Javascript
JavaScript实现留言板案例
Mar 17 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
MySQL相关说明
2007/01/15 PHP
一步一步学习PHP(8) php 数组
2010/03/05 PHP
php实现文件下载更能介绍
2012/11/23 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
PHP文件下载实例代码浅析
2016/08/17 PHP
php装饰者模式简单应用案例分析
2019/10/23 PHP
Domino中运用jQuery读取视图内容的方法
2009/10/21 Javascript
getElementByIdx_x js自定义getElementById函数
2012/01/24 Javascript
JS定义回车事件(实现代码)
2013/07/08 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
node.js中的querystring.escape方法使用说明
2014/12/10 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
jQueryUI Sortable 应用Demo(分享)
2017/09/07 jQuery
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
Django自定义认证方式用法示例
2017/06/23 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
Python Scrapy框架:通用爬虫之CrawlSpider用法简单示例
2020/04/11 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
HTML5在手机端实现视频全屏展示方法
2020/11/23 HTML / CSS
Deichmann英国:德国鞋类零售商
2021/01/30 全球购物
西安当代医院管理研究院笔试题
2015/12/11 面试题
环境科学专业大学生自荐信格式
2013/09/21 职场文书
医学院毕业生自荐信
2013/11/08 职场文书
青年文明号事迹材料
2014/01/18 职场文书
应聘文员自荐信范文
2014/03/11 职场文书
李开复演讲稿
2014/05/24 职场文书
汽车维修求职信
2014/06/15 职场文书
监理中标通知书
2015/04/16 职场文书
2015年度学校卫生工作总结
2015/05/12 职场文书
校园新闻稿范文
2015/07/18 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书