Как обновить стиль страницы после css-переключателя

Question

У меня есть функция javascript, которая переключается с двух разных файлов css, которые влияют на мой веб-сайт. Проблема в том, что css только частично применяется с моей функцией, и мне нужно обновить браузер, чтобы получить весь новый стиль.

Вот моя функция:

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

Как вы можете видеть, я удалить, а затем добавить новый стиль в заголовке страницы.

Есть ли способ обновить стиль?

(Это происходит со всеми браузера)

Answer 1

CSS-

<link href="/css/main.css" rel="stylesheet"type="text/css" title="main" media="screen" /> 
<link href="/css/alt1.css" rel="alternate stylesheet" type="text/css" title="alt1" media="screen" /> 

Javascript

function switch_style (title) { 
    var lnks = document.getElementsByTagName('link'); 
    for (var i = lnks.length - 1; i >= 0; i--) { 
    if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) { 
     lnks[i].disabled = true; 
     if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false; 
    }}} 

Answer 2

Я может быть видом что-то, но зачем вам нужно переключить таблицы стилей, когда вы можете просто добавьте новый класс в свой элемент html или body?

Плюсы:

• Быстрее переключения. Вам не нужно ждать, пока ваш новый css будет загружен - альтернативные стили могут быть включены в таблицу стилей .
• Упрощенный. jQuery.toggleClass (или element.className, если вы не используете jQuery) будет выполнять всю работу.
• Работы везде.

Con (ы):

• Вы должны добавить новый класс для всех селекторов в CSS.