YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » JavaScript » DOM » 如何用JavaScript动态创建link标签到head里

如何用JavaScript动态创建link标签到head里

我想应该有不少做前端的朋友碰到过需要用 JavaScript 动态创建样式表标签——link标签。这次我就说说如何在浏览器中动态创建link标签。

演示地址:http://www.yaohaixiao.com/scripts/js-create-link-tag.html

使用 jQuery 创建 link 标签

如果你开发中喜欢用jQuery,那么用jQuery在创建link标签应该是这样的:

var cssURL = 'http://www.yaohaixiao.com/wp-content/themes/BlueNight/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 = 'http://www.yaohaixiao.com/wp-content/themes/BlueNight/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 = 'http://www.yaohaixiao.com/wp-content/themes/BlueNight/style.css',
	// document.createStyleSheet的同时就已经把link标签添加到了head中了,怎么讲呢,倒是挺方便
    linkTag = document.createStyleSheet(cssURL);

createStyleSheet( [sURL] [, iIndex])方法接受两个参数,sURL就是CSS文件的URL路径。iIndex 为可选参数,指插入的link在页面中stylesheets collection的索引位置,默认是在最后添加新创建的样式。

演示地址:http://www.yaohaixiao.com/scripts/csslinktest.html

完整的解决方案

基本上都介绍完了,来看看完整的解决方案吧:

	
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);	
}

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:如何用JavaScript动态创建link标签到head里

« »

1 条评论

  • 我当时乌龙的处理:

    function createLink(cssURL,lnkId){        
        var head = document.getElementsByTagName('head')[0],
            linkTag = null,
            isIE = function(){
                var version = 0, userAgent = navigator.userAgent.toLowerCase();
                
                if (/(msie)\D+(\d[\d.]*)/.test(userAgent)) {
                    version = RegExp.$2;
                }
                            
                version = parseInt(version,10);
               
                            return version;
            }();
                    
            if(!cssURL){
                return false;
            }
               
        if(isIE && isIE < 9){
            linkTag = document.createStyleSheet(cssURL);
        }
        else{
            linkTag = document.createElement('link');
            linkTag.href = cssURL;        
            head.appendChild(linkTag);        
        }
                    
        linkTag.id = lnkId || 'dynamic-style';
            linkTag.setAttribute('rel','stylesheet');
            linkTag.setAttribute('media','all');
            linkTag.setAttribute('type','text/css');
    }
    

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)