【Jquery】Jquery动态加载css文件

前言

很多时候我们需要在页面中引用外部的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内容但是文件名不同）

参考自：mrr

【Jquery】Jquery动态加载css文件相关推荐

js动态加载css文件和js文件的方法
今天研究了下js动态加载js文件和css文件的方法. 网上发现一个动态加载的方法.摘抄下来,方便自己以后使用 [code lang="html"] <html xmlns=& ...
ASP.NET动态加载CSS文件
方法一: 通过使页面动态加载不同CSS实现多界面 <%@page language="C#"%> <%@import namespace="System ...
php 动态加载JavaScript文件或者css文件
1. 动态加载JS文件第一种方法: test.php <script language="JavaScript" src="test6.php?str=i lov ...
HTML5动态加载资源方式,动态加载JavaScript文件的3种方式
以下是遇到的几种动态加载JavaScript文件的方式,持续更新中... 一.使用document.write/writeln()方式该种方式可以实现js文件的动态加载,原理就是在重写文档流,这种方 ...
javascript动态加载css、javascript脚本方法
1. 动态加载js文件到head标签并执行回调方法调用:dynamicLoadJs('http://www.yimo.link/static/js/main.min.js',function(){a ...
AJAX jQuery tab,动态加载选显卡
AJAX jQuery tab,动态加载选显卡 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
jquery table ajax,JQuery Ajax动态加载Table数据的实例讲解
我们在jsp定义一个select和一个table,要求实现根据select的选值,动态加载table数据. table第一次加载数据的function定义如下: function loadData() ...
Jquery的load加载本地文件出现跨域错误的解决方案
Jquery的load加载本地文件出现跨域错误的解决方案参考文章: (1)Jquery的load加载本地文件出现跨域错误的解决方案 (2)https://www.cnblogs.com/jing-t ...
html动态加载js方法,原生JS实现动态加载js文件并在加载成功后执行回调函数的方法...
本文实例讲述了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法.分享给大家供大家参考,具体如下: 有的时候需要动态加载一个javascript文件,并且在加载成功后执行回调函数(例如文件中 ...

【Jquery】Jquery动态加载css文件

前言

方式一（Jquery）

方式二（Jquery）

方式三（Javascript）

【Jquery】Jquery动态加载css文件相关推荐

最新文章

热门文章