動態加載css方法

我很早就知道，您可以通過使用addRule（）和insertRule（）來動態加載樣式規則到頁面中，具體取決於它是IE還是符合標準的瀏覽器。但是我剛剛發現，在Chrome上，更爲普遍有用的（對我來說）方法工作得很好：創建一個樣式元素，使用任意css文本（它可以是css文件的內容）添加一個texnode，然後將其添加到文檔中。您也可以通過從文檔中刪除該樣式節點來刪除它。舉例來說，此功能工作正常，當我把它串「的div {背景色：紅色;} \ NP {FONT-FAMILY：格魯吉亞;}」：動態加載css方法

var applyCss = function (cssString) { 
    var scriptNode = document.createElement('style'); 
    scriptNode.appendChild(document.createTextNode(cssString)); 
    document.getElementsByTagName('head')[0].appendChild(scriptNode); 
    return scriptNode; 
};

雖然我明白做它的好處在某些情況下，這種快捷方式（類似於使用innerHTML而不是逐個部分地使用DOM技術來構建元素）對於我在許多情況下特別有用，如果我能指望它工作的話。

是否一貫支持？這種方法有什麼缺點嗎？我特別好奇，因爲我從未在任何地方見過這種方法。

來源

2011-11-05 rob

您無法在任何地方看到或提出這種方法的主要原因很大程度上是因爲它沒有必要。不要一直試圖編輯style元素，而應該有一組可以動態添加和從元素中刪除的類。

根據我的經驗，動態添加帶有文本的樣式元素跨瀏覽器。到目前爲止，我還沒有發現，不喜歡的東西的工作瀏覽器：

//jQuery for brevity 
$('<style>p{margin:0}</style>').appendTo('head');

我曾經需要這的唯一情況是爲增加大集的非常具體的款式與用途一個小書籤。否則，我將動態添加一個樣式表：

$('<link rel="stylesheet" type="text/css" href="path/to/stylesheet.css />').appendTo('head');

但實際上，樣式表應該已經存在於HTML中。

來源

2011-11-05 23:01:40 zzzzBov

謝謝，很高興知道。這種事情有很多用途，從可設置的跨域小部件到開發工具，可以讓您實時微調網站，而不是隨着每次更改而更新。 – rob

@rob，jQuery-UI使用外部樣式表，而不是假設使用它的人*想要默認樣式。我完全理解它在某些情況下很有用，但將HTML CSS和JS視爲MVC模式是一種很好的做法：HTML是模型，CSS是視圖，JS是控制器。如果你把樣式放在JS中，它會打破這種模式。 – zzzzBov

@zzzzBov有一些你沒有遇到過的特殊情況，你可能想要動態地加載一個css文本（通常當CSS文本是動態生成的時候）。 –

使用YepNope lib，它會爲你做髒東西。這只是1.7kb當gzipped和縮小。

來源

2012-10-11 08:04:57 jayarjo

動態加載css方法

回答

相關問題