Replacing CSS File on the Fly (And Apply the New Style to the Page)

Replacing css file on the fly (and apply the new style to the page)

You can create a new link, and replace the old one with the new one. If you put it in a function, you can reuse it wherever it's needed.

The Javascript:

function changeCSS(cssFile, cssLinkIndex) {

    var oldlink = document.getElementsByTagName("link").item(cssLinkIndex);

    var newlink = document.createElement("link");
    newlink.setAttribute("rel", "stylesheet");
    newlink.setAttribute("type", "text/css");
    newlink.setAttribute("href", cssFile);

    document.getElementsByTagName("head").item(cssLinkIndex).replaceChild(newlink, oldlink);
}

The HTML:

<html>
    <head>
        <title>Changing CSS</title>
        <link rel="stylesheet" type="text/css" href="positive.css"/>
    </head>
    <body>
        <a href="#" onclick="changeCSS('positive.css', 0);">STYLE 1</a> 
        <a href="#" onclick="changeCSS('negative.css', 0);">STYLE 2</a>
    </body>
</html>

For simplicity, I used inline javascript. In production you would want to use unobtrusive event listeners.

Dynamically Switching CSS Files

First, start by defining the original style like this:

HTML:

<link id="style" rel="stylesheet" type="text/css" href="style.css" />

Notice the id=style that we'll use to find the element. That might fix your first error.

For the second one, you have to decide whether to use document.addEventListener( 'DOMContentLoaded', bindEvents, false ); or window.onload because they're different functions. This might help you window.onload vs. body.onload vs. document.onready.

So, now we can do some Javascript:

HTML (the links):

 <li><button onclick='setStyle("css/style.comicsans.css")'>JB's Fav Font</button></li>
 <li><button onclick='setStyle("css/style.other.css")'>Other Font</button></li>

First, notice that I'm only using a parameter to call setStyle function on click, and btw it's better to work with <button>, this way we get a cleaner result.

Javascript:

var cssStyle = document.getElementById('style');

window.onload = function(){
    if(localStorage && localStorage.getItem("style"))
        cssStyle.href = localStorage.getItem("style");
};

function setStyle(newStyle){
    cssStyle.href = newStyle;

    if(localStorage)
        localStorage.setItem("style", newStyle);
};

BONUS:
But if you are only be using two styles, then try to simplify, and do a shorthand method to do this:

HTML:

<li><button onclick='toggleStyle()'>Toggle</button></li>

<!-- cssswitcher js -->
<script type='text/javascript'>

    var cssStyle = document.getElementById('style');
    var listStyles = ["css/style.comicsans.css", "css/style.other.css"];

    window.onload = function(){
        if(localStorage && localStorage.getItem("style"))
            cssStyle.href = localStorage.getItem("style");
    };

    function toggleStyle(){
        var previousStyle = cssStyle.href;

        if(previousStyle.endsWith(listStyles[0]))
            newStyle = listStyles[1];
        else
            newStyle = listStyles[0];

        cssStyle.href = newStyle;

        if(localStorage)
            localStorage.setItem("style", newStyle);
    };
</script>

How to change external CSS on the fly

Add an id to the css import and change the href on click with js

<html> <head>  <title>New UI Mockup</title>  <link href="dark.css" id="theme" rel="stylesheet">  <script>  var themeName = "dark";  function changeTheme(){   if (themeName == "dark"){    themeName = "light";   }   else{    themeName = "dark";   }   document.getElementById("theme").href = themeName + ".css";  }  </script> </head> <body> <div class="title">Change Theme Demo</div> <div class="button" id="changeButton" onclick="changeTheme()">Change Theme</div> </body></html>

How to change the css stylesheet dynamically for a website being viewed?

To prevent the caching issue, the stylesheets need to have different names. Here's an example of how you can implement it using jQuery: http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/

Demo

Dynamically change css files

I believe you could achieve this through using html data attributes instead of using separate CSS files if it is a theme change you are going for.

function switchTheme(e) {  let theme = document.getElementById("theme-selector").value;  let app = document.getElementById("app");  app.setAttribute('data-theme', theme);}

[data-theme="1"] {  --foreground-color: #eeeeee;  --background-color: #222222;}
[data-theme="2"] {  --foreground-color: #000000;  --background-color: #eeeeee;}
h1 {  color: var(--foreground-color);  background-color: var(--background-color);}

<div id="app" data-theme="1">  <h1>A cool title with different colors...</h1></div>
<select id="theme-selector" onchange="switchTheme()">  <option value="1">Theme 1</option>  <option value="2">Theme 2</option></select>

LESS.CSS and CSS file replacement with JS on the fly issue

Can't you just use media queries?

<link rel='stylesheet' media='screen and (max-width: 701px)' href='narrow.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 1120px)' href='medium.css' />
<link rel='stylesheet' media='screen and (min-width: 1120px)' href='wide.css' />

Switching website's theme/css file

Give your stylesheet link an id..

<link rel=stylesheet href=mycss.css id=shtylesheet>

Then you can change it with javascript

function changeStylesheet(newstylesheet){
    document.getElementById('shtylesheet').setAttribute('href', newstylesheet);
}

Then if you wanna do buttons or something

<button onclick="changeStylesheet('light.css')">Lights on</button>
<button onclick="changeStylesheet('dark.css')">Lights off</button>

How can you change the attached CSS file with Javascript?

Add an id to the link tag and use

<link id="myStyleSheet" href="stylesheet.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
    function styler(attr){
        var href;
        switch(attr){
            case'1':href = "stylesheet1.css";break;
            case'2':href = "stylesheet2.css";break;
            case'3':href = "stylesheet3.css";break;
            case'4':href = "stylesheet.css";break;
            default:;break;
        }
        document.getElementById('myStyleSheet').href = href;
    }
</script>

See this post

changing styles file with Js by clicking a button

This will edit the existing style tag.

$("#mybtn").on("click",function(){  $('link[href="css/styles.css"]').attr("href","css/styles2.css");});

<button id="mybtn">Change Style</button> //Let this is the button to change styles

Replacing CSS File on the Fly (And Apply the New Style to the Page)