Newer
Older
j2321-tanakai / html / jquery.cookie.js
@j2321 j2321 on 4 Aug 1 KB 更新
 // 文字サイズ変更ボタン
 $(function () {
    // クッキー(fontSize)があれば読み込む
    let fz = $.cookie('fontSize');

    if (fz) {
      // サイズ変更ボタンから背景色と文字色のCSSを外す
      $('.bl_sizeBtn').removeClass('is_active');
      
      // クッキーに保存されたidと一致したら適用
      if (fz == 'fz_sm') {
        $('html').css('font-size', '80%');
        $('#fz_sm').addClass('is_active');
      } else if (fz == 'fz_md') {// デフォルトサイズ
        $('html').css('font-size', '100%');
        $('#fz_md').addClass('is_active');
      } else if (fz == 'fz_lg') {
        $('html').css('font-size', '120%');
        $('#fz_lg').addClass('is_active');
      }
    }
    
    //サイズ変更時にクッキーへ保存
    $('.bl_sizeBtn').click(function () {
      // クリックされたbuttonのidをクッキー(fontSize)に保存(有効期限は7日)
      $.cookie('fontSize', this.id, { expires: 7 });
      
      // サイズ変更ボタンから背景色と文字色のCSSを外す
      $('.bl_sizeBtn').removeClass('is_active');
      
      // クリックされたbuttonのidと一致したら適用
      if (this.id == 'fz_sm') {
        $('html').css('font-size', '80%');
        $(this).addClass('is_active');
      } else if (this.id == 'fz_md') {// デフォルトサイズ
        $('html').css('font-size', '100%');
        $(this).addClass('is_active');
      } else if (this.id == 'fz_lg') {
        $('html').css('font-size', '120%');
        $(this).addClass('is_active');
      }
    });
  });