Question

I have a javascript function that switch from two different css files that affect my web-site. The problem is that the css are only partially applied with my function and I need to refresh the browser to get the entire new style.

Here is my function:

function switch_style ()
{
    var head=document.getElementsByTagName('head')[0];

    for (i = 0, link_tag = document.getElementsByTagName("link"); i < link_tag.length ; i++ ) 
    {
            if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) && link_tag[i].title) 
            {
                if (link_tag[i].title == "normal")
                {
                    head.removeChild(link_tag[i]);          
                }
            }
    }
    var cssNode = document.createElement('link');
    cssNode.type = 'text/css';
    cssNode.rel = 'stylesheet';
    cssNode.href = '/templates/rhuk_milkyway/css/template_contrast.css';
    head.appendChild(cssNode);
    set_cookie( style_cookie_name, "contrast", style_cookie_duration ); 
}

As you can see i remove and then append a new style to the page header.

Is there a way to refresh the styling?

(It happens with all browser)

Answer 1

I may be overlooking something, but why do you need to switch stylesheets when you can just add a new class to your html or body element?

Pros:

• Faster switching. You do not have to wait until your new css is
  loaded – the alternate styles can be included in the original
  stylesheet.
• Simpler. jQuery.toggleClass (or element.className, if you do not use jQuery) will do all the job.
• Works everywhere.

Con(s?):

• You have to add the new class to all the selectors in css.