Jquery/Javascript動態加載CSS文件（運行後），替換其他的CSS文件？

我一直在閱讀如何在頁面運行時使用jquery動態加載css文件，但一直未能找到任何東西......我在想，是否有可能基本上重新編譯它，加載一個css文件以反映服務器端的變化..Jquery/Javascript動態加載CSS文件（運行後），替換其他的CSS文件？

原因是我正在製作一個應用程序，它提供了許多不同的頁面佈局大小，並且在修改每個css時遇到了一些奇怪的問題元素在頁面上使用jquery，所以我做了一個服務器端腳本，將創建一個不同的CSS文件是相同的，除了元素的大小..所以我想這樣做，我可以動態加載一個新的這個版本在任何時候都會替換原來的並且反映頁面佈局的變化..我不確定這是否可以使用其他腳本因爲它似乎沒有提到這個用例，所以它做動態加載。感謝您的任何信息。

來源

2010-08-15 Rick

我們做我們的web應用程序類似的東西。用戶可以選擇幾種預定義的佈局。

有一個靜態的CSS文件加載通常與所有佈局共享的常見樣式。

然後函數低於收到CSS字符串服務器下發：

var setStyle = function (css){ 
    //css has the format: selector{...style...} 
    var styleNode, 
     cur = document.getElementById('_theme'); 
    cur && cur.parentNode.removeChild(cur); 

    styleNode = document.createElement('style'); 
    styleNode.setAttribute('type', 'text/css'); 
    styleNode.setAttribute('id', '_theme'); 
    document.getElementsByTagName('head')[0].appendChild(styleNode); 

    if((/MSIE/).test(navigator.userAgent)){ 
     styleNode.styleSheet.cssText = css; 
    }else{ 
     styleNode.appendChild(document.createTextNode(css)); 
    } 
}

的功能增加了一個STYLE標籤id爲_theme，並在其中插入CSS定義。
並將佈局應用於頁面。
如果ID _theme已經存在，則將其替換。

最近我們開發了一個移動版本的網絡應用程序，我們徹底改變了這種技術。
風格不再由靜態CSS定義，而是從JSON定義，我們可以直接從瀏覽器使用變量，函數等動態生成。

我們做了一小JS LIB，代碼，請訪問：http://github.com/pure/jstyle

來源

2010-08-15 22:35:01 Mic

良好的信息..我很好奇，爲什麼你會改變動態生成的移動應用程序，但..我認爲這會讓較慢的設備（電話）執行比正常更多的處理，因爲它必須至少做一些將json var放入佈局的工作。我想它的內容將在緩慢連接上而不是它們上遞增加載等待整個事情加載與用戶看到什麼，直到整個CSS加載？ – Rick 2010-08-21 01:40:40

我們先做了桌面版。我以後也會把它移到JS上。 JS足夠快，DOM在手機中速度很慢。如果你打算給人們一些靈活性來改變，比如：字體，顏色，背景;使用JS，變量，函數使它更容易。 – Mic 2010-08-21 10:30:59

function createjscssfile(filename, filetype){ 
if (filetype=="js"){ //if filename is a external JavaScript file 
    var fileref=document.createElement('script') 
    fileref.setAttribute("type","text/javascript") 
    fileref.setAttribute("src", filename) 
} 
else if (filetype=="css"){ //if filename is an external CSS file 
    var fileref=document.createElement("link") 
    fileref.setAttribute("rel", "stylesheet") 
    fileref.setAttribute("type", "text/css") 
    fileref.setAttribute("href", filename) 
} 
return fileref 
} 

function replacejscssfile(oldfilename, newfilename, filetype){ 
var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist using 
var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" //determine corresponding attribute to test for 
var allsuspects=document.getElementsByTagName(targetelement) 
for (var i=allsuspects.length; i>=0; i--){ //search backwards within nodelist for matching elements to remove 
    if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(oldfilename)!=-1){ 
    var newelement=createjscssfile(newfilename, filetype) 
    allsuspects[i].parentNode.replaceChild(newelement, allsuspects[i]) 
    } 
} 
} 

replacejscssfile("oldscript.js", "newscript.js", "js") //Replace all occurences of "oldscript.js" with "newscript.js" 
replacejscssfile("oldstyle.css", "newstyle", "css") //Replace all occurences "oldstyle.css" with "newstyle.css"

來源：http://www.javascriptkit.com/javatutors/loadjavascriptcss2.shtml

來源

2010-08-15 20:53:54

Jquery/Javascript動態加載CSS文件（運行後），替換其他的CSS文件？

回答

相關問題