【js】webサイト上で文字変更を行う

国・県・市のweb制作案件になど、高齢者向けのサイトを制作する際に、文字のフォントサイズを変更できるようにするシステムを導入することがあります。個人的には必要ないようにも感じますがそれはさておき、jsで実際のコードを書いたので参考にどうぞ。

<div class="header-size-flex">
        <div class="header-size-col">
          <p>文字サイズ</p>
        </div>
        <div class="header-size-col">
          <ul class="header-size-list">
            <li><button class="size-button" data-font="58">小</button></li>
            <li><button class="size-button active" data-font="62">中</button></li>
            <li><button class="size-button" data-font="66">大</button></li>
          </ul>
        </div>
      </div>

&-flex{
      display: flex;
      align-items: center;
    }
    &-col{
      p{
        font-size: 1.6rem;
        margin: 0px;
        margin-right: 10px;
      }
      .header-size-list{
        @include clearfix;
        li{
          width: 27px;
          float: left;
          margin-right: 7px;
          &:last-child{
            margin-right: 0px;
          }
        }
      }
      .size-button{
        padding: 0px;
        border: 2px solid #000;
        border-radius: 5px;
        width: 27px;
        height: 27px;
        font-size: 16px;
        font-weight: normal;
        background-color: #fcf3d8;
        color: #000;
        &:focus{
          outline: none;
        }
      }
      .active{
        background-color: #f5960d;
        color: #fff;
      }
    }

$(function(){
    var className = '.size-button'
  function initFontSize() {
    var size = (sessionStorage.getItem('fontSize'))? sessionStorage.getItem('fontSize') : '62';
        console.log(size);
    changeFontSize(size);

  }

  function changeFontSize(size){
        size = Number(size);
        var changesize = size + 0.5;
        console.log(changesize)
    $('html').css('font-size', changesize + '%');

    $(className).removeClass('active');
    $('[data-font=' + size + ']').addClass('active');
    sessionStorage.setItem('fontSize', size);
  }

  function addListeners() {
    $('[data-font]').on('click', function(){
      changeFontSize($(this).data('font'));
    });
  }

  function init() {
    initFontSize();
    addListeners();
  }

  init();
});

参考文献

https://note.com/oceant/n/n8acb0edb665ahttps://note.com/oceant/n/n8acb0edb665a
https://sterfield.co.jp/designer/web%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%B5%E3%82%A4%E3%82%BA%E3%82%92jquery%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B/https://sterfield.co.jp/designer/web%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%B5%E3%82%A4%E3%82%BA%E3%82%92jquery%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E5%A4%89%E6%9B%B4%E3%81%99%E3%82%8B/