您好,欢迎访问一九零五行业门户网

JavaScript动态创建link标签到head里的方法_javascript技巧

本文实例讲述了javascript动态创建link标签到head里的方法。分享给大家供大家参考。具体分析如下:
相信有很多做前端的朋友碰到过需要用 javascript 动态创建样式表标签——link标签。这里我们就来说说如何在浏览器中动态创建link标签。
使用 jquery 创建 link 标签
如果你开发中喜欢用jquery,那么用jquery在创建link标签应该是这样的:
复制代码 代码如下:
var cssurl = '/style.css',
    linktag = $('');
// 请看清楚,是动态将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 里特有的方法 createstylesheetie 里特有的方法 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 = $('');
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);
}
希望本文所述对大家的javascript程序设计有所帮助。
其它类似信息

推荐信息