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
- <!-- 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;
- }
更多 Web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/jquery/17291.html