jQueryなしで文字サイズスイッチを作ります。
セッションに保存しているのでページが変わっても文字サイズが保たれます。
HTML
<button onclick="changeFontSize(3.2)" data-fs="3.2">大</button>
<button onclick="changeFontSize(1.6)" data-fs="1.6">中</button>
<button onclick="changeFontSize(1.2)" data-fs="1.2">小</button>
クリックするとchangeFontSize()という関数が呼び出されます。データ属性を利用してそれぞれの文字サイズを設定しています。
CSS
html{
font-size: 62.5%;
}body {
font-size: 1.6rem;
}
javascript
<script type="text/javascript">
//フォントサイズ変更
function changeFontSize(size){
//bodyタグにサイズを設定
document.querySelector("body").style.fontSize = size + "rem";
//セッションに保存
sessionStorage.setItem('fontSize', size);
//ボタンにactiveのclassを追加 or 削除
let buttons = document.querySelectorAll('[data-fs]');
for(let i = buttons.length; i--;){
if(buttons[i].dataset.fs == size){
buttons[i].classList.add("active");
} else{
buttons[i].classList.remove("active");
}
}
}
//初期化
let size = '1.6';
if(sessionStorage.getItem('fontSize')){
//フォントサイズがセッションに保存されていれば上書き
size = sessionStorage.getItem('fontSize');
}
changeFontSize(size);
</script>
「大」ボタンを押すとbodyに3.2が渡されます。文字サイズが2倍になるってことです。
それぞれのボタンにactiveクラスを付与したり削除したりしています。上のCSSでは省略していますが、activeならボタンの色を変えたりしています。
参考文献
サイトの文字サイズを変更するボタンの作り方 – ocean様 [note.com]
ありがとうございます🙇