Element styles not updating when changing CSS file

Question

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;}

Post your code regarding changing href on link, and post your relevant CSS — Curtis
– Curtis, Commented Aug 10, 2012 at 8:22
Maybe you can check this out: stackoverflow.com/questions/2024486/… — Roman Mazur
– Roman Mazur, Commented Aug 10, 2012 at 8:23
I know this isn't what you asked, but rather than loading a new css sheet, could you not combine the styles into one sheet and use .addClass (or something similar) to toggle between them? — Michael Peterson
– Michael Peterson, Commented Aug 10, 2012 at 8:27

Digihash · Accepted Answer · 2012-08-10 08:49:50Z

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.

Alex · Accepted Answer · 2012-08-10 08:36:16Z

0

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;}

edited Aug 10, 2012 at 8:36

answered Aug 10, 2012 at 8:27

Alex

9,0612 gold badges29 silver badges44 bronze badges

5 Comments

Abhishek Over a year ago

Its a tad brash just outright stating that my code is wrong without even looking at it. Just so you know, I have several different elements, and their styles are changing, except for a specific div... I have no idea why, hence the question. As for your jQuery code, its functionally no different from my vanilla code.

Alex Over a year ago

Okay, no need to get your back up. Maybe try posting some code next time and we wouldnt have to assume. "except for a specific div" if this is the case are you sure you're selecting it correctly in the CSS? not confusing IDs and Classes?

Abhishek Over a year ago

Yeah, the element selection is spot on... If I load dark.css by default it applies the desired style... Its just when switching the css files after the page has finished loading makes it appear as if the file itself is loaded, but the elements are sticking to their guns with the original styles...

Alex Over a year ago

And all other elements change fine, just not the div?

Abhishek Over a year ago

Yeah... Turns out there was something wrong with the browser loading the new CSS file but not refreshing the styling for all the elements... I placed HTML elements before the div (the div's quite early on on the page) and they didn't change either... A quick uninstall/reinstall of the browser and restart of the system, and the problem seems to have resolved itself...

Collectives™ on Stack Overflow

Element styles not updating when changing CSS file

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related