相信有很多做前端的朋友碰到过需要用 javascript 动态创建样式表标签——link标签。这里我们就来说说如何在浏览器中动态创建link标签。
使用 jquery 创建 link 标签
如果你开发中喜欢用jquery，那么用jquery在创建link标签应该是这样的：
var cssurl = '/style.css',
linktag = $('<link href="' + cssurl + '" rel="stylesheet" type="text/css" media="' + (media || "all") + '" charset="'+ charset || "utf-8" +'" />');
// 请看清楚，是动态将link标签添加到head里
$($('head')[0]).append(linktag);
使用原生 javascript 创建 link 标签
如果你喜欢纯天然的 javascript，就要需要这么写：
var head = document.getelementsbytagname('head')[0],
cssurl = '/style.css',
linktag = document.createelement('link');
linktag.id = 'dynamic-style';
linktag.href = cssurl;
linktag.setattribute('rel','stylesheet');
linktag.setattribute('media','all');
linktag.setattribute('type','text/css');
head.appendchild(linktag);
ie 里特有的方法 createstylesheet
ie 里特有的方法 createstylesheet 方法也是很方便。
var head = document.getelementsbytagname('head')[0],
cssurl = 'themes/bluenight/style.css',
// document.createstylesheet 的同时就已经把link标签添加到了head中了，怎么讲呢，倒是挺方便
linktag = document.createstylesheet(cssurl);
createstylesheet( [surl] [, iindex])方法接受两个参数，surl就是css文件的url路径。iindex 为可选参数，指插入的link在页面中stylesheets collection的索引位置，默认是在最后添加新创建的样式。
基本上都介绍完了，来看看完整的解决方案吧：
function createlink(cssurl,lnkid,charset,media){
var head = $($('head')[0]),
linktag = null;
if(!cssurl){
return false;
}
linktag = $('<link href="' + cssurl + '" rel="stylesheet" type="text/css" media="' + (media || "all") + '" charset="'+ charset || "utf-8" +'" />');
head.append(linktag);
}
function createlink(cssurl,lnkid,charset,media){
var head = document.getelementsbytagname('head')[0],
linktag = null;
if(!cssurl){
return false;
}
linktag = document.createelement('link');
linktag.setattribute('id',(lnkid || 'dynamic-style'));
linktag.setattribute('rel','stylesheet');
linktag.setattribute('charset',(charset || 'utf-8'));
linktag.setattribute('media',(media||'all'));
linktag.setattribute('type','text/css');
linktag.href = cssurl;
head.appendchild(linktag);
}
以上就是使用js和jquery创建link标签用法实例详解的详细内容。