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文件？

回答

相关问题