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 相关文章推荐
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
js 实现无缝滚动 兼容IE和FF
Jul 15 Javascript
JavaScript 数组运用实现代码
Apr 13 Javascript
学习js在线html(富文本,所见即所得)编辑器
Dec 18 Javascript
详解jQuery插件开发中的extend方法
Nov 19 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
angular1配合gulp和bower的使用教程
Jan 19 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 jQuery
vue服务端渲染添加缓存的方法
Sep 18 Javascript
微信小程序 image组件遇到的问题
May 28 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
一个查看session内容的函数
2006/10/09 PHP
用php将任何格式视频转为flv的代码
2009/09/03 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
在textarea中显示html页面的javascript代码
2007/04/20 Javascript
jQuery生成asp.net服务器控件的代码
2010/02/04 Javascript
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
jquery提示效果实例分析
2014/11/25 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
2015/06/16 Javascript
jquery ajax分页插件的简单实现
2016/01/27 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
在vue中使用Base64转码的案例
2020/08/07 Javascript
[06:45]DOTA2卡尔工作室 英雄介绍幻影长矛手篇
2013/07/12 DOTA
从零学Python之入门(三)序列
2014/05/25 Python
编写Python CGI脚本的教程
2015/06/29 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
python 实现的车牌识别项目
2021/01/25 Python
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
Java中实现多态的机制
2015/08/09 面试题
捷科时代的软件测试笔试题
2015/11/09 面试题
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
三好学生个人总结
2015/02/15 职场文书
新生开学寄语大全
2015/05/28 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python
使用feign服务调用添加Header参数
2021/06/23 Java/Android