javascript - Jquery/Javascript 动态加载 CSS 文件(运行后)，替换其他 css 文件？

Question

我一直在阅读有关如何在页面运行时使用 jquery 动态加载 css 文件的信息，但在此方面找不到任何内容......我想知道是否有可能基本上重新-加载一个 css 文件以反射(reflect)来自服务器端的更改..

这样做的原因是我正在制作一个提供许多不同页面布局大小的应用程序，并且在使用 jquery 修改页面上的每个 css 元素时遇到了一些奇怪的问题，所以我正在制作一个服务器端脚本这将创建许多不同的 css 文件，除了元素的大小之外，它们都是相同的。所以我想这样做，这样我就可以随时动态加载这个新版本，它将替换原来的并反射(reflect)出来页面布局的变化。我不确定是否可以使用其他执行动态加载的脚本，因为它似乎没有提到这个用例。感谢您提供任何信息。

Answer 1

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