css href属性を複数のhtmlページonclickに変更する

Question

私はユーザーが私のサイトで自分の経験のためにカラーテーマを選択させたいと思っています。私は異なるテーマの外部CSSファイルを作成し、私が作成したすべてのカラーオプションを切り替える機能を作成しました。

唯一の問題は、サイト上の別のページへのリンクをクリックして、テーマをページを作成したデフォルトの色に戻すことです。

すべてのHTMLページのhref属性を動的に変更して、CSSカラーファイルがすべてのページで変更されるようにする方法はありますか？または、これを覚えておくためにクッキーが必要ですか？私はまだクッキーについて学んだことはありませんが、これが機能であるかどうか疑問に思っています。

以下は、そのページの各色の間で変更されたコードですが、そのページのみです。

HTML： オレンジのテーマ パープルテーマ レッドテーマ

Javascriptを： 関数setStyleSheet（URL）{ VARスタイルシート=のdocument.getElementById（ "スタイルシート"）; stylesheet.setAttribute（ 'href'、url）; }

私は必要なCSSファイルを外部に保存しています。どんな助けでも大歓迎です。ありがとう。

Answer 1

理想的にはCookieを使用しますが、あなたは本当にが本当には、クッキーなしでそれをやってみたかった場合は、のような何か実行してみてください可能性があり：

var links = document.querySelectorAll("a"); 

for (i = 0; i < links.length; i++) { 
    var existingHref = links[i].href; 
    links[i].href += (links[i].href.indexOf("?") + 1 ? "&" : "?") + "theme=" + encodeURIComponent(theme); 
} 

（未テストコードを、およびその他のいくつかのエッジがあります

これは、ページ上の各リンクを更新し、そのURLにtheme=[theme]プロパティを追加します。window.location.searchを解析して後のページに読み込むことができます。私は、私は本当にクッキーを使用する必要がありますという意味では「理想的」と言う

function getTheme() { 
    if (window.location.search.split("theme=").length < 2) return null; 
    return window.location.search.split("theme=")[1].split("&")[0]; 
} 

注 - があるかどうのように、彼らは作られた、この目的のためにほぼ正確に使用されているが、あなたは、スケッチエッジケースに対処する必要はありません既にthemeがURLにある場合、またはURLにthemeも使用する別のドメインに行く場合は、Javascriptを使用してページを変更しても機能しますが、この方法もうまくいくはずです。