CSSファイルを動的に切り替える

Question

以下のコードでページを読み込もうとすると、2つのエラーメッセージが表示されます。エラーメッセージは以下のとおりです。

1. "キャッチされない例外TypeError：。HTMLAnchorElement.colのヌルのプロパティ 'のhref' を設定することはできません（匿名関数）.onclick（http://www.jimbrink.org/:363:17）"
2. が「キャッチされないにReferenceError：bindEventsがで定義されていません（インデックス）：375 "

クリックすると別のCSSファイル（フォントが異なる）に切り替わるリンクを作成しようとしています。

（BONUSの質問：？リンクは2つのスタイルシートを切り替えるための方法があります）

私は別のStackOverflowの質問からこれを撮影したが、私は私を動作するようにコードを取得するように見えることはできません状況。

ここのリンクです：

   <li><a href="#" class="changeStyle" data-style="css/style.comicsans.css" data-type="text/css" data-rel="stylesheet">JB's Fav Font</a></li> 

ここでは、ページの下部からのjs機能です：

<!-- cssswitcher js --> 
<script type='text/javascript'> 
window.onload = function bindEvents(){ 

    var css=document.getElementById('style'); 
    var col=document.querySelectorAll('a.changeStyle'); 

    /* iterate through collection and assign listener */ 
    for(var n in col)if(col[n].nodeType==1) col[n].onclick=function(e){ 
    e.preventDefault();/* prevent jumping to top of page etc */ 
    var el=typeof(e.target)!='undefined' ? e.target : e.srcElement; 

    /* assign style attributes */ 
    css.href=el.dataset.style; 
    css.rel=el.dataset.rel; 
    css.type=el.dataset.type; 

    /* store reference to style selected in localstorage */ 
    localStorage.setItem('style', el.dataset.style); 
    }; 

    /* if there is a reference to the user's css choice in storage, assign it */ 
    if(localStorage.getItem('style')!=null) css.href=localStorage.getItem('style'); 
    } 

    document.addEventListener('DOMContentLoaded', bindEvents, false); 
</script> 

Answer 1

まず、次のようにオリジナルのスタイルを定義することによって開始：

HTML：

<link id="style" rel="stylesheet" type="text/css" href="style.css" /> 

要素を見つけるために使用するid=styleに注目してください。それはあなたの最初のエラーを修正するかもしれません。

document.addEventListener('DOMContentLoaded', bindEvents, false);またはwindow.onloadのどちらを使用するかは、機能が異なるため、どちらを使用するかを決定する必要があります。これはあなたを助けるかもしれないwindow.onload vs. body.onload vs. document.onready。だから、

、今我々はいくつかのJavascriptを行うことができます。

HTML（リンク）：私はクリックするだけでsetStyle関数を呼び出すためにパラメータを使用していることを

<li><button onclick='setStyle("css/style.comicsans.css")'>JB's Fav Font</button></li> 
<li><button onclick='setStyle("css/style.other.css")'>Other Font</button></li> 

まず、通知を、 btw <button>で作業する方が良いでしょう。こうすれば、よりクリーンな結果が得られます。

Javascriptを：

var cssStyle = document.getElementById('style'); 

window.onload = function(){ 
    if(localStorage && localStorage.getItem("style")) 
     cssStyle.href = localStorage.getItem("style"); 
}; 

function setStyle(newStyle){ 
    cssStyle.href = newStyle; 

    if(localStorage) 
     localStorage.setItem("style", newStyle); 
}; 

BONUS： しかし、あなたは唯一の簡素化しようとすると、これを行うための簡単な方法を行うため、次に、2つのスタイルを使用している場合：

HTML：

<li><button onclick='toggleStyle()'>Toggle</button></li> 

<!-- cssswitcher js --> 
<script type='text/javascript'> 

    var cssStyle = document.getElementById('style'); 
    var listStyles = ["css/style.comicsans.css", "css/style.other.css"]; 

    window.onload = function(){ 
     if(localStorage && localStorage.getItem("style")) 
      cssStyle.href = localStorage.getItem("style"); 
    }; 

    function toggleStyle(){ 
     var previousStyle = cssStyle.href; 

     if(previousStyle.endsWith(listStyles[0])) 
      newStyle = listStyles[1]; 
     else 
      newStyle = listStyles[0]; 

     cssStyle.href = newStyle; 

     if(localStorage) 
      localStorage.setItem("style", newStyle); 
    }; 
</script> 

Answer 2

私は、これはあなたを助けることを願って、jQueryのを使用して、私のプロジェクトの一つでこれをやったが、 ：

HTML：

動的なCSSコード付き

はJavaScript：

var data = { 
    "projectColors": { 
    "viewedColor": "#fffc20", 
    "selectedColor": "#ff7920" 
    } 
}; 

var style = $(document.createElement("style")).attr("type", "text/css"); 
style.append("#projectList .project.viewed {color: " + data.projectColors.viewedColor + ";}"); 
style.append("#projectList .project.selected {color: " + data.projectColors.selectedColor + ";}"); 
style.appendTo("head"); 

JSFiddle：

https://jsfiddle.net/nikdtu/9gberp5o/