実現したいこと
よく自治体サイトであるような背景色、文字サイズ拡大ボタンを設置し、
ページが遷移してもその状態が保持されるよう実装したいです。
発生している問題・分からないこと
ヘッダーにボタンを設置し、それをクリックすることで背景色や文字サイズを変更させるところまでは実装できたのですが、
この状態をcookieを利用してページ遷移した場合にも保持させるというところで躓いています。
背景色変更ボタンは、style_dummy.cssという空のCSSファイルを切り替えています。
以下ソースコードの内容にCookieに値を保存させる記述はどのようになるのでしょうか。
該当のソースコード
index.html
1<!DOCTYPE html> 2<html> 3 4<head> 5 <meta charset="utf-8" /> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 7 <meta name="viewport" content="width=device-width,initial-scale=1.0" /> 8 <title>閲覧支援機能デモ</title> 9 <meta name="description" content="【ページの説明文】" /> 10 <meta name="robots" content="index,follow" /> 11 <link rel="stylesheet" href="css/style.css" /> 12 <link id="changeStyle" rel="stylesheet" href="css/style_dummy.css" /> 13 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 14</head> 15 16<body> 17 <div class="inner"> 18 <ul class="support_list"> 19 <li class="support_size_btn"> 20 <ul> 21 <li class="size_btn"><button class="medium" type="button">標準</button></li> 22 <li class="size_btn"><button class="large" type="button">拡大</button></li> 23 </ul> 24 </li> 25 <li class="support_bgcolor_btn"> 26 <ul> 27 <li class="bg_btn"><button class="colorWht">白</button></li> 28 <li class="bg_btn"><button class="colorBlk">黒</button></li> 29 <li class="bg_btn"><button class="colorBlu">青</button></li> 30 </ul> 31 </li> 32 </ul> 33 <div class="container"> 34 <p>ここに本文が入ります。文字サイズ・色、背景色が選択したボタンによって変わります。</p> 35 </div> 36 </div> 37 38 <script src="js/function.js"></script> 39</body> 40 41</html>
style.css
1@charset "utf-8"; 2 3html { 4 font-size: 62.5%; 5 background-color: #fff; 6 color: #000; 7} 8.inner { 9 width: 1100px; 10 margin: 0 auto; 11} 12 13.support_list { 14 list-style: none; 15 display: flex; 16} 17.support_list > li > ul { 18 display: flex; 19 list-style: none; 20} 21.support_list > li > ul > li > button { 22 background-color: #fff; 23 border-right: none; 24 cursor: pointer; 25 font-size: 1.6rem; 26} 27.support_list > li > ul > li:last-child > button { 28 border-right: 2px solid #000; 29} 30.support_bgcolor_btn .colorBlk { 31 color: #fff; 32 background-color: #000; 33} 34.support_bgcolor_btn .colorBlu { 35 color: #ee0; 36 background-color: #47e; 37} 38 39p { 40 font-size: 1.6rem; 41}
style_black.css
1@charset "utf-8"; 2 3html { 4 background-color: #000; 5 color: #fff; 6} 7.support_list > li > ul > li > button { 8 background-color: #000; 9 color: #fff; 10 border-top: 2px solid #fff; 11 border-right: none; 12 border-bottom: 2px solid #fff; 13 border-left: 2px solid #fff; 14} 15.support_list > li > ul > li:last-child > button { 16 border-right: 2px solid #fff; 17} 18.support_bgcolor_btn .colorBlk { 19 color: #fff; 20 background-color: #000; 21} 22.support_bgcolor_btn .colorBlu { 23 color: #fff; 24 background-color: #000; 25} 26 27
style_blue.css
1@charset "utf-8"; 2 3html { 4 background-color: #47e; 5 color: #ee0; 6} 7.support_list > li > ul > li > button { 8 background-color: #47e; 9 color: #ee0; 10 border-top: 2px solid #ee0; 11 border-right: none; 12 border-bottom: 2px solid #ee0; 13 border-left: 2px solid #ee0; 14} 15.support_list > li > ul > li:last-child > button { 16 border-right: 2px solid #ee0; 17} 18.support_bgcolor_btn .colorBlk { 19 color: #ee0; 20 background-color: #47e; 21} 22.support_bgcolor_btn .colorBlu { 23 color: #ee0; 24 background-color: #47e; 25}
fnuction.js
1$(function(){ 2 3 // 文字サイズ変更ボタン 4 var body = $("body"); 5 $(".medium").click(function(){ 6 $("html").css("font-size","62.5%"); 7 body.removeClass("font_large"); 8 }); 9 $(".large").click(function(){ 10 $("html").css("font-size","100%"); 11 body.addClass("font_large"); 12 }); 13 14 // 背景色変更ボタン 15 var elem = document.getElementById("changeStyle"); 16 $(".colorWht").on("click", function(){ 17 elem.href = "css/style_dummy.css"; 18 }); 19 $(".colorBlk").on("click", function(){ 20 elem.href = "css/style_black.css"; 21 }); 22 $(".colorBlu").on("click", function(){ 23 elem.href = "css/style_blue.css"; 24 }); 25});
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
jquery.ookie.jsを使う方法が調べたら出てきましたが、自分なりにその方法で書いてみましたが思った挙動になりませんでした。
補足
特になし
