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

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

本文介绍一种通过JavaScript动态生成link标签并插入页面head元素的方法，供开发者参考。

前端开发中常遇到需要动态加载样式表的需求，即通过JavaScript创建link标签。本文将详细讲解在浏览器环境中实现这一功能的具体步骤。

使用 jQuery 创建 link 标签

使用 jQuery 创建 link 标签

若项目依赖jQuery库，可通过其API简化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

Internet Explorer浏览器提供了一种特有的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);
}

希望本文所述内容对大家的javascript程序设计有所帮助。