CODEWITHSUNDEEP
css
Abhishek
Abhishek

Reputation: 4340

Element styles not updating when changing CSS file

So I have 2 css files - light.css and dark.css. I have a button on a page which toggles the <link> element's 'href' attribute between these two css files.

Now, I have a <div> which gets its background styling from light.css by default. Upon changing the 'href' attribute to 'dark.css', the div doesn't take on the new styling code provided in the dark.css...

Any ideas why?

== EDIT: Added code snippets...

The JS to change the <link>:

var nightMode = false;
var theme = document.querySelector('#theme');
// Where <link id="theme" style="text/css" rel="stylesheet" href="light.css">

function toggleNight()
{
    if (!nightMode)
    {
        setTimeout("theme.setAttribute('href', '_css/dark.css')", 400);
        nightMode = true;
    }
    else
    {
        setTimeout("theme.setAttribute('href', '_css/light.css')", 400);
        nightMode = false;  
    }
}

In addition to this, the CSS files look like this:

// light.css
div{background:#ddd;}

// dark.css
div{background:#333;}

Upvotes: 2

Views: 2523

Answers (2)

Digihash
Digihash

Reputation: 375

I changed the source a bit from this website: Changing external CSS file with Javascript.

I think this is the code you expect to do this:

<!DOCTYPE html>
<html>
  <head>
    <title>Changing CSS extern file using only JavaScript</title>
    <link id="changeCSS" rel="stylesheet" type="text/css" href="positive.css"/>
    <script type="text/javascript">
      function changeCSS() {

        var oldlink = document.getElementById("changeCSS");
        var cssFile;

        if(oldlink.getAttribute('href') === 'positive.css') {
          cssFile = 'negative.css';
        }
        else {
          cssFile = 'positive.css';
        }

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

        document.getElementsByTagName("head").item(0).replaceChild(newlink, oldlink);
      }
    </script>
  </head>
  <body>
    <button onclick="changeCSS();">change</button>
    <div class="box">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
  </body>
</html>

I hope this is what you looked for. If you don't understand the code, just ask.

Upvotes: 1

Alex
Alex

Reputation: 9031

Your jQuery/javascript code is obviously wrong, try something like:

$('button').click(function(){
  if ($('link[href*="temp1"]').length > 0)
      $("link").attr('href',"http://ajthomas.co.uk/temp2.css");
  else
      $("link").attr('href',"http://ajthomas.co.uk/temp1.css");
});

and heres a fiddle - http://jsfiddle.net/Xtjv2/

UPDATE

Just to rule it out, try changing you CSS from:

// light.css
div{background:#ddd;}

// dark.css
div{background:#333;}

To:

// light.css
div{background-color:#ddd;}

// dark.css
div{background-color:#333;}

Upvotes: 0

Related Questions