jQuery动态加载CSS与JS文件详解及示例

81 浏览量更新于2024-08-30 收藏 39KB PDF 举报

本文主要介绍了如何使用jQuery动态加载外部CSS文件的方法，以便在网页开发中实现灵活的页面布局调整或场景切换时，动态引入所需的样式。以下是详细步骤和示例代码： 1. 直接使用jQuery方法：使用`$`函数创建一个新的`<link>`元素，并设置其属性，如`rel`（关系类型）、`type`（MIME类型）和`href`（链接地址）。最常见的做法是通过`.attr()`方法添加这些属性，然后使用`.appendTo("head")`将其添加到文档的`<head>`标签中，确保CSS被浏览器解析和应用。例如： ```javascript $("<link>") .attr({ rel: "stylesheet", type: "text/css", href: "site.css" }) .appendTo("head"); ``` 2. 使用`append`或`appendTo`方法：如果偏好另一种方式，可以直接将`<link>`元素作为HTML字符串添加到`head`元素中，通过`.append()`或`.appendTo()`方法实现相同的效果： ```javascript $("head").append("<link>"); ``` 3. 使用JavaScript原生DOM操作：对于更底层的操作，可以使用JavaScript的DOM API来创建`link`元素并添加到`<head>`中： ```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); } ``` 4. 动态加载多种资源：这篇文章还提到了一个扩展了的jQuery方法，用于同时加载CSS和JS文件，如： ```javascript $.extend({ includePath: '', include: function(file) { // ... 代码逻辑处理文件列表和扩展名判断 // 示例：根据文件类型（CSS或JS）动态创建对应的标签 var tag = isCSS ? "link" : "script"; // ... 继续处理并添加到文档中 } }); ``` 本文提供了几种实用的方法，使得开发者能够根据需要在运行时动态地向网页添加或替换CSS样式，提高了页面的灵活性和响应性。无论是jQuery的简化语法，还是原生JavaScript，都有助于开发者更好地控制和管理页面的样式加载过程。

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

<html>

<head>

/libs/jquery/1.4.4/jquery.min.js"></script>

<title>A simple jQuery image slide</title>

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38605538

粉丝: 4
资源: 991

jQuery动态加载CSS与JS文件详解及示例

CSS3 引入jquery实现页面加载的LOADING效果

jQuery中 animate.css 使用方法

jquery.multiselect.js和jquery.multiselect.css两个文件的引用地址

js如何读取并修改本地css文件

jquery动态背景颜色

jquery 操作dom改变css

jquery-ui的样式文件

jQuery 如何动态添加背景颜色

Jquery 实现多层级文件夹

使用JQuer点击任意项目，实现如效果图（字体颜色任意），根据所完成的任务书写报告，报告包含：完成项目的方法，具体流程，主要代码，项目体会，字体颜色不用css文件改变

最新资源