jQuery动态载入css文件

文章描述:

在服务器上修改网站样式后需要强制刷新或者清理缓存才能显示新编辑的样式,像这种可以用动态加载样式来处理。

jQuery

方式一:

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

方式二:

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

这一种可以根据first和last是载入到head里面头部还是尾部

javaScript

addStyle('css/style.css');
function addStyle(stylePath) {
    var container = document.getElementsByTagName("head")[0];
    var addStyle = document.createElement("link");
    addStyle.rel = "stylesheet";
    addStyle.type = "text/css";
    addStyle.media = "screen";
    addStyle.href = stylePath;
    container.appendChild(addStyle);
}

动态

动态载入的时候后面跟了随机参数为了达到实时访问效果

var cssFileUrl='css/style.css?'+random(1000,9999);
if (cssFileUrl) {
	$("<link>")
		.attr({
			rel: "stylesheet",
			type: "text/css",
			href: cssFileUrl
		})
	.appendTo("head");
}
function random(min, max) {

  return Math.floor(Math.random() * (max - min)) + min;

}

 

 

发布时间:2022/05/30

发表评论