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 相关文章推荐
用倒置滤镜把div倒置,再把table倒置。
Jul 31 Javascript
JavaScript 字符编码规则
May 04 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
javascript实现点击后变换按钮显示文字的方法
May 13 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
ZeroClipboard.js使用一个flash复制多个文本框
Jun 19 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
Vue 菜单栏点击切换单个class(高亮)的方法
Aug 22 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
webpack中如何加载静态文件的方法步骤
May 18 Javascript
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
异步加载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+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
PHP获取文件扩展名的4种方法
2015/11/24 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
PHP中SQL查询语句的id=%d解释(推荐)
2016/12/10 PHP
LAMP环境使用Composer安装Laravel的方法
2017/03/25 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
服务器安全设置的几个注册表设置
2007/07/28 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
2014/05/04 Javascript
jQuery选择器querySelector的使用指南
2015/01/23 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
2015/06/10 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
Python中AND、OR的一个使用小技巧
2015/02/18 Python
Python解析树及树的遍历
2016/02/03 Python
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
python线程安全及多进程多线程实现方法详解
2019/09/27 Python
Python list运算操作代码实例解析
2020/01/20 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
应届大学生自荐信格式
2013/09/21 职场文书
陈欧的广告词
2014/03/18 职场文书
2015年银行客户经理工作总结
2015/04/01 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
深入理解python多线程编程
2021/04/18 Python
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python