【Jquery】Jquery动态加载css文件

原创于 2021-03-04 14:43:59 发布 · 2.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #css #动态加载css

jQuery或JavaScript技术点记录专栏收录该内容

26 篇文章

订阅专栏

本文介绍三种使用JQuery和JavaScript动态加载CSS文件的方法。包括通过创建link元素并设置属性，利用JQuery简化DOM操作，以及纯JavaScript实现。这些技巧有助于前端开发者灵活地控制网页样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

很多时候我们需要在页面中引用外部的css文件，下面将介绍一下如何通过Jquery动态加载css文件

方式一（Jquery）

var cssFileUrl='../css/home.css';
if (cssFileUrl) {
		$("<link>")
			.attr({
				rel: "stylesheet",
				type: "text/css",
				href: cssFileUrl
			})
			.appendTo("head");
}

方式二（Jquery）

var cssFileUrl='../css/home.css';
$("head").append("<link>");
    css = $("head").children(":last");
    css.attr({
        rel: "stylesheet",
        type: "text/css",
        href: cssFileUrl
});

方式三（Javascript）

var cssFileUrl='../css/home.css';
function addCSS() {
    var link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.href = cssFileUrl;
    document.getElementsByTagName("head")[0].appendChild(link);
}

最终效果为（引用了同样的css内容但是文件名不同）