Load and unload stylesheets on the fly dynamically

Question

Load and unload stylesheets on the fly dynamically

After searching through numerous posts and forums without success, I am in need of a solution to dynamically load and unload stylesheets for my website.

The website I am constructing has a main stylesheet along with 2 optional stylesheets that alter colors. I want to have 2 links that, when clicked, will load a new stylesheet that overrides some styles from the main sheet.

For instance:

My website is yellow, which most users prefer. However, I want to give them the choice to switch to red or blue by clicking on a link. The red stylesheet will then override the main styles and turn the website red; if they click blue, it changes to blue.

To make things more complex, if a user first selects red but then changes their mind and wants blue instead, I need the red stylesheet to be unloaded and only the blue loaded.

Since I am not very knowledgeable in javascript, I am struggling with this task. Any help would be greatly appreciated!

javascript html css

Answer 1

Answer №1

How to dynamically Load 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);

Removing a CSS file dynamically

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

var allCtrl = document.getElementsByTagName(targetElement);
for (var i=allCtrl.length; i>=0; i--)  { //Iterate backwards through the node list to find and remove matching elements
if (allCtrl[i] && allCtrl[i].getAttribute(targetAttr)!=null && allCtrl[i].getAttribute(targetAttr).indexOf(filename)!=-1);
allCtrl[i].parentNode.removeChild(allCtrl[i]);
}
}

Answer 2

How to dynamically Load 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);

Removing a CSS file dynamically

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

var allCtrl = document.getElementsByTagName(targetElement);
for (var i=allCtrl.length; i>=0; i--)  { //Iterate backwards through the node list to find and remove matching elements
if (allCtrl[i] && allCtrl[i].getAttribute(targetAttr)!=null && allCtrl[i].getAttribute(targetAttr).indexOf(filename)!=-1);
allCtrl[i].parentNode.removeChild(allCtrl[i]);
}
}

Answer 3

Answer №2

After some minor adjustments, I was able to successfully implement the solution by referencing:

The link contains:

function loadjscssfile(filename, filetype){
    if (filetype=="js"){
        var fileref=document.createElement('script')
        fileref.setAttribute("type","text/javascript")
        fileref.setAttribute("src", filename)
    }
    else if (filetype=="css"){
        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") 
loadjscssfile("javascript.php", "js") 
loadjscssfile("mystyle.css", "css")

function removejscssfile(filename, filetype){
    var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" 
    var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" 
    var allsuspects=document.getElementsByTagName(targetelement)
    for (var i=allsuspects.length; i>=0; i--){ 
    if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
        allsuspects[i].parentNode.removeChild(allsuspects[i]) 
    }
}

removejscssfile("somescript.js", "js") 
removejscssfile("somestyle.css", "css")

Just a heads up: Removing a script element with this method does not unload the JavaScript code defined in it on most browsers.

Answer 4

After some minor adjustments, I was able to successfully implement the solution by referencing:

The link contains:

function loadjscssfile(filename, filetype){
    if (filetype=="js"){
        var fileref=document.createElement('script')
        fileref.setAttribute("type","text/javascript")
        fileref.setAttribute("src", filename)
    }
    else if (filetype=="css"){
        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") 
loadjscssfile("javascript.php", "js") 
loadjscssfile("mystyle.css", "css")

function removejscssfile(filename, filetype){
    var targetelement=(filetype=="js")? "script" : (filetype=="css")? "link" : "none" 
    var targetattr=(filetype=="js")? "src" : (filetype=="css")? "href" : "none" 
    var allsuspects=document.getElementsByTagName(targetelement)
    for (var i=allsuspects.length; i>=0; i--){ 
    if (allsuspects[i] && allsuspects[i].getAttribute(targetattr)!=null && allsuspects[i].getAttribute(targetattr).indexOf(filename)!=-1)
        allsuspects[i].parentNode.removeChild(allsuspects[i]) 
    }
}

removejscssfile("somescript.js", "js") 
removejscssfile("somestyle.css", "css")

Just a heads up: Removing a script element with this method does not unload the JavaScript code defined in it on most browsers.

Answer 5

Answer №3

If you are looking to update the colors of divs on your website, I recommend utilizing JQuery's ".css" function.

By using this method, you can easily modify the css properties of divs or classes with a simple click event.
To change the background color of any div with the class "class_name" to black, use the code below:

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

For further information on jQuery syntax, refer to their documentation at: http://api.jquery.com/css/

Answer 6

If you are looking to update the colors of divs on your website, I recommend utilizing JQuery's ".css" function.

By using this method, you can easily modify the css properties of divs or classes with a simple click event.
To change the background color of any div with the class "class_name" to black, use the code below:

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

For further information on jQuery syntax, refer to their documentation at: http://api.jquery.com/css/

Load and unload stylesheets on the fly dynamically

Answer №1

Answer №2

Answer №3

Similar questions

NodeJS async function returning a value of undefined

Refresh the flatlist to display new content without uploading items automatically

Arranging two DIVs side by side

What is the best way to extract the value from a resolved Promise?

Creating a responsive layout in HTML/CSS where the div element expands to fill the entire vertical space of its parent

Horizontal alignment of Bootstrap columns is not working as expected

When attempting to develop a discord bot using Heroku, I encounter an issue where the bot functions properly when run locally, but malfunctions once deployed on Heroku's platform

Tips for updating multiple divs after submitting content with jQuery

Navigating a JSON message received from a websocket: Best practices

What is the best way to eliminate a white border around an input button in an HTML document?

Is there a way for me to align my percentage with my progress bar on the same line?

The CSS transition fails to function correctly once a specific function is executed

Vuejs is throwing an error claiming that a property is undefined, even though the

What is the most effective method to ensure this layout is functioning properly?

AngularJS directive created for validation on blur

How can Vue 3's v-bind=$attrs be implemented effectively?

What is the best way to layer SQL functions in sequelize.js?

What steps can be taken to issue an alert when the table does not contain any records?

NodeJs: Dealing with package vulnerabilities stemming from dependent npm packages - Tips for resolving the issue

Mystery Surrounding MP3 Playback in ASP.NET