jQuery_动态加载css文件实现方法 / 憋错料

有时我们可能会需要使用 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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

<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{

padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#ffffff;

font-family:"arial";

}

.theme{

margin:10px;

width:70px;

padding:5px;

text-align:center;

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{

padding:10px;

font-weight:bold;

}

.footer{

padding:5px;

}

blue.css

body{

font-family:"arial";

}

.theme{

margin:10px;

width:70px;

padding:5px;

text-align:center;

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;

color:#ffffff;

}

.menu{

padding:10px;

font-weight:bold;

}

.footer{

padding:5px;

}

yellow.css

body{

font-family:"arial";

}

.theme{

margin:10px;

width:70px;

padding:5px;

text-align:center;

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{

padding:10px;

font-weight:bold;

}

.footer{

padding:5px;

}

orange.css

body{

font-family:"arial";

}

.theme{

margin:10px;

width:70px;

padding:5px;

text-align:center;

border:solid #333333 1px;

color:#444444;

font-weight:bold;

cursor:pointer;

}

.container{

margin-left:auto;

margin-right:auto;

width:700px;

}

.inner{

padding:20px;

color:#404040;

}

.menu{

padding:10px;

font-weight:bold;

color:#FFBF26;

}

.footer{

padding:5px;

color:#FFBF26;

}

时间： 2024-12-16 18:10:14

jQuery_动态加载css文件实现方法

jQuery_动态加载css文件实现方法的相关文章

AngularCSS--关于angularjs动态加载css文件的方法(仅供参考)

jQuery动态加载css文件实现方法

两种动态加载JavaScript文件的方法

JavaScript_动态加载CSS和JS文件

.NET Web后台动态加载Css、JS 文件，换肤方案

JavaScript动态加载CSS和JS文件

jquery如何动态加载js文件

js动态加载css和js

Java中动态加载jar文件和class文件