javascript stylesheet changer не работает

Question

Хорошо, что друг дал мне этот код, и он не работает. Я искал чейнджер стилей java, и это единственное, что я могу найти. Когда я нажимаю на ссылку (чтобы изменить стиль), ничего не происходит. Помогите? И мне трудно понять javascript, так что это сложно для меня.

расслоения плотной код:

function setActiveStyleSheet(title) { 
    var i, a, main; 
    for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { 
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { 
     a.disabled = true; 
     if(a.getAttribute("title") == title) a.disabled = false; 
    } 
    } 
} 

function getActiveStyleSheet() { 
    var i, a; 
    for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { 
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title"); 
    } 
    return null; 
} 

function getPreferredStyleSheet() { 
    var i, a; 
    for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { 
    if(a.getAttribute("rel").indexOf("style") != -1 
     && a.getAttribute("rel").indexOf("alt") == -1 
     && a.getAttribute("title") 
     ) return a.getAttribute("title"); 
    } 
    return null; 
} 

function createCookie(name,value,days) { 
    if (days) { 
    var date = new Date(); 
    date.setTime(date.getTime()+(days*24*60*60*1000)); 
    var expires = "; expires="+date.toGMTString(); 
    } 
    else expires = ""; 
    document.cookie = name+"="+value+expires+"; path=/"; 
} 

function readCookie(name) { 
    var nameEQ = name + "="; 
    var ca = document.cookie.split(';'); 
    for(var i=0;i < ca.length;i++) { 
    var c = ca[i]; 
    while (c.charAt(0)==' ') c = c.substring(1,c.length); 
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length); 
    } 
    return null; 
} 

window.onload = function(e) { 
    var cookie = readCookie("style"); 
    var title = cookie ? cookie : getPreferredStyleSheet(); 
    setActiveStyleSheet(title); 
} 

window.onunload = function(e) { 
    var title = getActiveStyleSheet(); 
    createCookie("style", title, 365); 
} 

var cookie = readCookie("style"); 
var title = cookie ? cookie : getPreferredStyleSheet(); 
setActiveStyleSheet(title); 

    } 
); 

Заголовок стилевых Код:

<link rel="stylesheet" type="text/css" media="screen" href="css/zerohour.css" title="default" /> 

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

Ссылка Активатор Код:

<a href="#" 

onclick="setActiveStyleSheet('default'); 

return false;">change style to default</a> 



<a href="#" 

onclick="setActiveStyleSheet('rainbow'); 

return false;">change style to rainbow</a> 

Answer 1

Я понимаю, что этот вопрос не помечен Jquery, но если у вас нет сильная причина придерживаться ванильного Javascript, я бы порекомендовал JQuery.

Вы можете переключать стили всего две строки кода:

$('#foobar').click(function(){ 
     $('link').attr('href','newstyle.css'); 
     return false; 
}); 

Live Demo

Answer 2

Вот переписана, что я думаю, что вы пытаетесь сделать:

var activeStylesheet = (function() { 

    // Store title of default linked stylesheet 
    var defaultTitle; 

    return { 

    // Set the active stylesheet to the link styesheet element with title 
    // Set all others to disabled 
    setActive: function(title) { 
     var link, links = document.getElementsByTagName('link'); 

     for (var i=0, iLen=links.length; i<iLen; i++) { 
     link = links[i]; 

     if (link.rel.indexOf("style") != -1 && link.title) { 
      link.disabled = true; 

      if (link.title == title) { 
      link.disabled = false; 
      } 
     } 
     } 
    }, 

    // Return the title of the currently active linked stylesheet, 
    // or undefined if none found 
    getActive: function() { 
     var link, links = document.getElementsByTagName('link'); 

     for (var i=0, iLen=links.length; i<iLen; i++) { 
     link = links[i]; 

     if (link.rel.indexOf("style") != -1 && 
      link.title && 
      !link.disabled) { 
      return link.title; 
     } 
     } 
    }, 

    // Return the title of the link stylesheet element where 
    // rel property contains 'alt' 
    getPreferred: function() { 
     var link, links = document.getElementsByTagName('link'); 

     for (var i=0, iLen=links.length; i<iLen; i++) { 
     link = links[i]; 

     if (link.rel.indexOf("style") != -1 && 
      link.rel.indexOf('alt') == -1 && 
      link.title) { 
      defaultTitle = title; 
      return link.title; 
     } 
     } 
    } 
    }; 
}()); 

Некоторые кнопки для изготовления:

<button onclick=" 
alert(activeStylesheet.getActive()); 
">Show title of active stylesheet</button> 
<button onclick=" 
activeStylesheet.setActive('rainbow'); 
">Set active stylesheet to "rainbow"</button> 
<button onclick=" 
activeStylesheet.setActive('default'); 
">Set active stylesheet to "default"</button> 

Обратите внимание, что использование заголовка будет чувствительным к регистру, поэтому будьте осторожны.

Вы можете сохранить заголовок таблицы стилей по умолчанию в переменной defaultTitle, но я не знаю, что вы хотите с ней сделать. У вас есть setPreferred, которая сначала проверяет defaultTitle установлен, и если нет, вызывает getPreferred называет SetActive с defaultTitle.