JavaScriptを使った文字サイズスイッチの作り方

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]
ありがとうございます🙇