Jquery / Javascript Динамически загружать файл CSS (после выполнения), заменяя другой файл CSS?

Question

Я читал о том, как я могу динамически загружать файл css с помощью jquery во время выполнения страницы, но не смог ничего найти по этому вопросу ... что мне интересно, если это возможно в принципе перезаписать- загрузить файл css, чтобы отразить изменения со стороны сервера.

Причина этого в том, что я делаю приложение, которое предлагает несколько различных размеров макета страницы, и при модификации я столкнулся с некоторыми странными проблемами.каждого элемента CSS на странице, используя jquery, поэтому я делаю сценарий на стороне сервера, который будет создавать несколько различных файлов CSS, которые идентичны, за исключением размеров элементов .. поэтому я хочу сделать это, чтобы я мог динамически загружатьв новой версии это в любое время, и он заменит оригинал и отразит изменения в макете страницы. Я не уверен, возможно ли это с помощью других сценариев, которые выполняют динамическую загрузку, поскольку это, как кажется, не упоминало об этомвариант использования.Спасибо за любую информацию.

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

Answer 2

Мы делаем нечто подобное в нашем веб-приложении.Пользователи могут выбирать между несколькими предопределенными макетами.

Существует статический файл 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 с идентификатором _theme и вставляет в него определение CSS.И макет применяется к странице.Если идентификатор _theme уже существует, его заменяют.

Совсем недавно мы разработали мобильную версию нашего веб-приложения и радикально изменили методику.Стиль больше не определяется статическим CSS, а из JSON, который мы можем генерировать динамически, используя переменные, функции и т. Д. Прямо из браузера.

Мы сделали небольшую библиотеку JSкод доступен по адресу: http://github.com/pure/jstyle