javascriptスタイルシートチェンジャーが動作しません

Question

いいえ、友達が私にこのコードを渡しても動作しません。私はJavaスタイルシートチェンジャーを探していましたが、これが私が見つけることができる唯一のものです。スタイルを変更するためにリンクをクリックすると何も起こりません。助けて？そして、私はjavascriptを理解するのが難しいので、私にとっては難しいです。

JSコード：

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" /> 

リンクアクティベーターコード：私はこの質問はJqueryをタグ付けされていないことを実現しますが

<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

あなたは持っていない限りバニラJavascriptに固執する強い理由、私はJqueryをお勧めします。あなたは、コードのわずか2行のスタイルを切り替えることができます

：ここ

$('#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という変数に保存できますが、どのようなことをしたいのか分かりません。あなたはがdefaultTitleを設定している場合されていないことを最初にチェックは、はをgetPreferred呼び出すdefaultTitleでのsetActive を呼び出すことをsetPreferred持っています。