JavaScript动态创建link标签到head里(延时加载)

使用 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 www.111Cn.net的同时就已经把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); 
}

时间: 2016-01-15

JavaScript动态创建link标签到head里(延时加载)的相关文章

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

本文实例讲述了JavaScript动态创建link标签到head里的方法.分享给大家供大家参考.具体分析如下: 相信有很多做前端的朋友碰到过需要用 JavaScript 动态创建样式表标签--link标签.这里我们就来说说如何在浏览器中动态创建link标签. 使用 jQuery 创建 link 标签 如果你开发中喜欢用jQuery,那么用jQuery在创建link标签应该是这样的: 复制代码 代码如下: var cssURL = '/style.css',     linkTag = $('<l

Javascript动态创建表格及删除行列的方法

 本文实例讲述了Javascript动态创建表格及删除行列的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

javascript动态创建链接的方法

  本文实例讲述了javascript动态创建链接的方法.分享给大家供大家参考.具体分析如下: 动态创建链接示例: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; c

javascript动态创建表格及添加数据实例详解

  本文实例讲述了javascript动态创建表格及添加数据的方法.分享给大家供大家参考.具体分析如下: 1. 动态创建表格(代码不兼容IE6) ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

javascript动态创建链接的方法_javascript技巧

本文实例讲述了javascript动态创建链接的方法.分享给大家供大家参考.具体分析如下: 动态创建链接示例: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态添加链接</title&

javascript动态创建表格及添加数据实例详解_javascript技巧

本文实例讲述了javascript动态创建表格及添加数据的方法.分享给大家供大家参考.具体分析如下: 1. 动态创建表格(代码不兼容IE6) <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态

JavaScript动态创建form表单并提交的实现方法_javascript技巧

本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 form 演示如下: // JavaScript 构建一个 form function MakeForm() { // 创建一个 form var form1 = document.createElement("form"); form1.id = "form1"; f

JavaScript动态创建div等元素实例讲解_javascript技巧

本文实例讲解了JavaScript动态创建div等元素的详细代码,分享给大家供大家参考,具体内容如下 效果图: 为了节省时间,就直接贴代码了! <html> <head> <title>js动态创建div等元素实例</title> <style type="text/css"> </style> </head> <body> <script language="javascr

Javascript动态创建表格及删除行列的方法_javascript技巧

本文实例讲述了Javascript动态创建表格及删除行列的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"