动态加载和卸载样式表 [英] Dynamically load and unload stylesheets

问题描述

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

I've searched various posts and forums but can't find the right answer. I need to find a way to dynamically load and unload stylesheets.

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

I'm building a website that has a main stylesheet and 2 optional stylesheets, for example purposes i'm going to use colours. I need to add 2 links, that loads a new stylesheet on click. This stylesheet will override some of the styles from the main stylesheet.

例如：

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

I have a yellow website, this is what most people want, however i've got the option for the user to click red or blue, when they do, the styles in the red stylesheet override the main styles and change the website to red, if they click blue this changes to blue.

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

To complicate things further, if the user clicks red and loads the red stylesheet and they changed their mind and now want blue, I need the red stylesheet to unload and just load the blue.

我不太熟练的javascript，所以我有这个问题。

I'm not very proficient with javascript so am having issues with this.

提前！

推荐答案

我设法让这个工作与一些调整：

I managed to get this working with a little tweaking of:

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

这篇关于动态加载和卸载样式表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！