Question

我搜索过各种帖子和论坛但找不到合适的答案。我需要找到一种动态加载和卸载样式表的方法。

我正在构建一个具有主样式表和2个可选样式表的网站，例如我将使用颜色。我需要添加2个链接，在点击时加载一个新的样式表。此样式表将覆盖主样式表中的某些样式。

例如：

我有一个黄色的网站，这是大多数人想要的，但是我有用户点击红色或蓝色的选项，当他们这样做时，红色样式表中的样式覆盖主要样式并更改网站为红色，如果他们点击蓝色，则变为蓝色。

为了进一步复杂化，如果用户点击红色并加载红色样式表并且他们改变主意并且现在想要蓝色，我需要卸载红色样式表并加载蓝色。

我对javascript不是很熟练，所以我遇到了这个问题。

提前致谢！

Answer 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 though in most browser this does not unload the script
removejscssfile("somestyle.css", "css") //remove all occurences "somestyle.css" on page

仅供参考：对于js脚本，这将从DOM中删除script元素，但大多数浏览器不会卸载js代码，即js文件中定义的任何内容都将保持定义。

Answer 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]);
}
}

Answer 3

如果您只更改页面中div的颜色，我建议使用JQuery的“.css”。

使用此功能，您可以通过单击链接更改div或类上的CSS样式。
以下内容将“class_name”类的任何div的背景颜色更改为黑色：

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

有关jquery语法的更多信息，请在此处查看其链接：http://api.jquery.com/css/

动态加载和卸载样式表

3 个答案: