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, Aug 10 '12 at 08:22
The JS Script to change the css file is definitely working... both the css files have a generic rule 'div', which styles all divs on the page... The light.css paints them light grey, while the dark.css paints them dark grey... Or it should, but the div isn't changing... Upon inspection, the does change its href attribute, but I feel like its not loading the css file... Ideas? — Abhishek, Aug 10 '12 at 08:23
Maybe you can check this out: http://stackoverflow.com/questions/2024486/is-there-an-easy-way-to-reload-css-without-reloading-the-page — Roman Mazur, Aug 10 '12 at 08: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, Aug 10 '12 at 08:27
Does the 'dark.css' work if you use it in the beginning instead of the 'light.css'? Did you check the console for a 'file not found' response? — insertusernamehere, Aug 10 '12 at 08:27
@MichaelPeterson - Yeah, technically that would work, but in my situation, I need to separate the files to keep the code clean. I could combine them, but I'd like to think that I can retain modularity this way... In the future, if I were to want a green theme for the site, I could have a standalone green.css, and an extra line or two changing the ... But yes, thanks for the suggestion anyways... — Abhishek, Aug 10 '12 at 08:33

score 1 · Answer 1 · answered Aug 10 '12 at 08:49

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-10T08:36:16.720

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 '12 at 08:36

answered Aug 10 '12 at 08:27

Alex

8,875
2
27
44

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. – Abhishek Aug 10 '12 at 08:30
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? – Alex Aug 10 '12 at 08:31
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... – Abhishek Aug 10 '12 at 08:34
And all other elements change fine, just not the div? – Alex Aug 10 '12 at 08:38
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... – Abhishek Aug 10 '12 at 10:41

Element styles not updating when changing CSS file

2 Answers2