JavaScript動態(tài)創(chuàng)建link標簽到head里的方法

更新時間：2014年12月22日 09:02:46 投稿：shichen2014

這篇文章主要介紹了JavaScript動態(tài)創(chuàng)建link標簽到head里的方法,分別介紹了使用jQuery的方法、使用原生javascript方法與IE特有的createStyleSheet方法等,非常具有實用價值,需要的朋友可以參考下

本文實例講述了JavaScript動態(tài)創(chuàng)建link標簽到head里的方法。分享給大家供大家參考。具體分析如下：

相信有很多做前端的朋友碰到過需要用 JavaScript 動態(tài)創(chuàng)建樣式表標簽——link標簽。這里我們就來說說如何在瀏覽器中動態(tài)創(chuàng)建link標簽。

使用 jQuery 創(chuàng)建 link 標簽

如果你開發(fā)中喜歡用jQuery，那么用jQuery在創(chuàng)建link標簽應該是這樣的：

復制代碼代碼如下:

var cssURL = '/style.css',

    linkTag = $('<link href="' + cssURL + '" rel="stylesheet" type="text/css" media="' + (media || "all") + '" charset="'+ charset || "utf-8" +'" />');

// 請看清楚，是動態(tài)將link標簽添加到head里   

$($('head')[0]).append(linkTag);

使用原生 JavaScript 創(chuàng)建 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的索引位置，默認是在最后添加新創(chuàng)建的樣式。

完整的解決方案

基本上都介紹完了，來看看完整的解決方案吧：

復制代碼代碼如下:

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程序設計有所幫助。

您可能感興趣的文章:

js實現GIF圖片的分解和合成
這篇文章主要為大家詳細介紹了js實現GIF圖片的分解和合成，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-10-10
關閉ie窗口清除Session的解決方法
本篇文章主要是對關閉ie窗口清除Session的解決方法進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-01-01
javascript中字符串拼接需注意的問題
作為一名.net開發(fā)人員相信大家都知道C#中字符串拼接與StringBuilder的效率差距。
2010-07-07
淺析JavaScript中命名空間namespace模式
namespace即“命名空間”，也稱“名稱空間” 、”名字空間”。接下來通過本文給大家介紹JavaScript中命名空間namespace模式的相關知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧
2016-06-06
微信小程序實現日歷簽到
這篇文章主要為大家詳細介紹了微信小程序實現日歷簽到功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
用javascript實現檢測指定目錄是否存在的方法
今天看到一篇關于onegreen被掛馬的代碼發(fā)現這個函數，它用js就可以檢測，制定的目錄或指定的文件是否存在，一般用來讀chm文件中的圖片來檢測，目錄的存在。高手就是不學好。
2008-01-01
前端雙token無感刷新圖文詳解
實現token無感刷新對于前端來說是一項十分常用的技術,這篇文章主要給大家介紹了關于前端雙token無感刷新的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-09-09
微信公眾平臺開發(fā)教程（五）詳解自定義菜單
這篇文章主要介紹了微信公眾平臺開發(fā)教程（五）詳解自定義菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2016-12-12
js模擬畫筆效果
非常不錯的效果，模板畫筆，代碼相對較少
2008-10-10
TypeScript命名空間合并講解
這篇文章主要介紹了TS命名空間合并講解，回顧上一節(jié)的內容，在上一節(jié)中我們介紹了TS中最常見的聲明合并：接口合并，今天要講的內容也是TS中的聲明合并，但這次是命名空間相關的合并,需要的朋友可以參考一下
2021-12-12