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判断单选框或复选框是否选中方法集锦
Apr 04 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
bootstrap下拉菜单使用方法解析
Jan 13 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
Vue实现点击箭头上下移动效果
Jun 11 Javascript
使用vue构建多页面应用的示例
Oct 22 Javascript
vue+iview分页组件的封装
Nov 17 Vue.js
异步加载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实现小型站点广告管理(修正版)
2006/10/09 PHP
使用php get_headers 判断URL是否有效的解决办法
2013/04/27 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
php基于curl扩展制作跨平台的restfule 接口
2015/05/11 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
基于JQUERY的多级联动代码
2012/01/24 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
Vue页面刷新记住页面状态的实现
2019/12/27 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
vue中template的三种写法示例
2020/10/21 Javascript
python集合类型用法分析
2015/04/08 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
在python2.7中用numpy.reshape 对图像进行切割的方法
2018/12/05 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
Python 实现将某一列设置为str类型
2020/07/14 Python
如何利用python正则表达式匹配版本信息
2020/12/09 Python
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
NULL是什么,它是怎么定义的
2015/05/09 面试题
SQL Server的固定数据库角色都有哪些?对应的服务器权限有哪些?
2013/05/18 面试题
几个SQL的面试题
2014/03/08 面试题
电大毕业自我鉴定
2014/02/03 职场文书
教师试用期自我鉴定
2014/02/12 职场文书
模具毕业生推荐信
2014/02/15 职场文书
纠风工作实施方案
2014/03/15 职场文书
新学期教师寄语
2014/04/02 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
病人家属写给医院的感谢信
2015/01/23 职场文书