Динамически загружать и выгружать таблицы стилей

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

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

Например:

У меня есть желтый веб-сайт, это то, чего хотят большинство людей, однако у меня есть возможность для пользователя нажимать красный или синий, когда они это делают, стили в красной таблице стилей переопределяют основные стили и меняют веб-сайт на красный, если они нажмут синий, это изменится на синий.

Чтобы усложнить ситуацию, если пользователь щелкает красным цветом и загружает красную таблицу стилей, и они изменили свое мнение и теперь хотят синего цвета, мне нужна красная таблица стилей, чтобы выгрузить и просто загрузить синий цвет.

Я не очень разбираюсь в javascript, поэтому у меня проблемы с этим.

Спасибо заранее!

Ответ 1

Мне удалось получить эту работу с небольшой настройкой:

http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

Содержание ссылки:

function loadjscssfile(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)
    }
    if (typeof fileref!="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref)
}

loadjscssfile("myscript.js", "js") //dynamically load and add this .js file
loadjscssfile("javascript.php", "js") //dynamically load "javascript.php" as a JavaScript file
loadjscssfile("mystyle.css", "css") ////dynamically load and add this .css file

function removejscssfile(filename, filetype){
    var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" //determine element type to create nodelist from
    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(filename)!=-1)
        allsuspects[i].parentNode.removeChild(allsuspects[i]) //remove element by calling parentNode.removeChild()
    }
}

removejscssfile("somescript.js", "js") //remove all occurences of "somescript.js" on page
removejscssfile("somestyle.css", "css") //remove all occurences "somestyle.css" on page

Ответ 2

Загрузка css динамически

var headID = document.getElementsByTagName("head")[0];
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'FireFox.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);

Чтобы выгрузить файл css

function removefile(filename, filetype) {
var targetElement = "link"; 
var targetAttr = "href"; 

var allCtrl = document.getElementsByTagName(targetElement);
for (var i=allCtrl.length; i>=0; i--)  { //search backwards within nodelist for matching elements to remove
if (allCtrl[i] && allCtrl[i].getAttribute(targetAttr)!=null && allCtrl[i].getAttribute(targetAttr).indexOf(filename)!=-1);
allCtrl[i].parentNode.removeChild(allCtrl[i]);
}
}

Ответ 3

Если вы только меняете цвета divs на своей странице, я бы предложил использовать JQuery ".css".

С помощью этого вы меняете стиль css на divs или классы с кликом по ссылке.

Следующее изменяет цвет фона любого div с классом class_name на черный:

$(".class_name").css("background-color","#000000");

Подробнее о синтаксисе jquery смотрите здесь: http://api.jquery.com/css/