jquery 动态加载css文件

最新推荐文章于 2023-08-16 22:33:44 发布

转载最新推荐文章于 2023-08-16 22:33:44 发布 · 8.4k 阅读

文章标签：

#css #CSS #Css #jquery #jQuery #JQUERY #Jquery #JQuery

前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍了三种不同的方法来加载CSS文件到网页中。第一种方法使用jQuery的链式调用来创建并附加样式链接；第二种方法也利用了jQuery，但通过append和children方法实现；最后一种方法则是纯JavaScript的方式，通过创建link元素并将其附加到head中。

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

第一种写法：
$("<link>")
    .attr({ rel: "stylesheet",
        type: "text/css",
        href: "site.css"
    })
    .appendTo("head");
第二种写法：
$("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);
}