使用 jquery 和 cookie 增大/减小字体大小

Question

我需要一个脚本来增加和减少字体，但保持用户在 return 访问网站时设置的值。我相信这应该由 cookie 来完成。我找到了一个例子，但是当我把它付诸实践时，什么也没有发生。当我点击 A + (increaseFont) 时没有任何反应。按照网站下方的脚本进行操作：https://erika.codes/jquery/increase-decrease-page-font-size-jquery/

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js'></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>

<div>
    <span class="increaseFont">A+</span>
    <span class="decreaseFont">A-</span>
    <span class="resetFont">Aa</span>
</div>

<script>
var fontResize = {
    textresize : function(){
        var $cookie_name = "eip-FontSize";
        var originalFontSize = $("html").css("font-size");
 
        $.cookie($cookie_name, originalFontSize, { expires: 7, path: '/' });
 
        // if exists load saved value, otherwise store it
        if($.cookie($cookie_name)) {
            var $getSize = $.cookie($cookie_name);
            $("html").css({fontSize : $getSize + ($getSize.indexOf("px")!=-1 ? "" : "px")}); // IE fix for double "pxpx" error
        } else {
            $.cookie($cookie_name, originalFontSize);
            //$.cookie($cookie_name, originalFontSize, {expires: 7, path: '/' });
        }
 
        // reset font size
        $(".resetFont").bind("click", function() {
            $("html").css("font-size", originalFontSize);
            $.cookie($cookie_name, originalFontSize);
            //$.cookie($cookie_name, originalFontSize, { expires: 7, path: '/' });
        });
 
        // function to increase font size
        $(".increaseFont").bind("click", function() {
            var currentFontSize = $("html").css("font-size");
            var currentFontSizeNum = parseFloat(currentFontSize, 10);
            var newFontSize = currentFontSizeNum*1.05;
            //var newFontSize = currentFontSizeNum + 2;
            if (newFontSize, 11) {
                $("html").css("font-size", newFontSize);
                $.cookie($cookie_name, newFontSize);
                //$.cookie($cookie_name, newFontSize, { expires: 7, path: '/' });
            }
            return false;
        });
 
        // function to decrease font size
        $(".decreaseFont").bind("click", function() {
          var currentFontSize = $("html").css("font-size");
          var currentFontSizeNum = parseFloat(currentFontSize, 10);
          var newFontSize = currentFontSizeNum*0.95;
          if (newFontSize, 11) {
            $("html").css("font-size", newFontSize);
            $.cookie($cookie_name, newFontSize);
            //$.cookie($cookie_name, newFontSize, { expires: 7, path: '/' });
          }
          return false;
        });
    }
}
 
$(document).ready(function(){
    fontResize.textresize();
})
</script>

*我发现另一个示例有效但没有 cookie，当页面更新时，值 return 变为正常：https://jsfiddle.net/pairdocs/yq8Le0gn/4/

Answer 1

• 您可以使用 localStorage() 来存储一个值。
• 将CSSbody设置为font-size: 16px;
• 将所有其他元素设置为以相对单位 定义的字体大小，例如：em 或rem.
• 使用 JS 将字体大小更改为 body 并查看所有其他元素相应调整。

使用两个 -/+ 按钮

const EL_body = document.querySelector("body");
const ELS_fontSize = document.querySelectorAll(".fontSize");
localStorage.fontSize = localStorage.fontSize || 16; // Read or default to 16px

function changeSize() {
  EL_body.style.fontSize = `${localStorage.fontSize}px`;
}

ELS_fontSize.forEach(el => el.addEventListener("click", function() {
  localStorage.fontSize = parseInt(localStorage.fontSize) + parseInt(el.value);
  changeSize();
}));

// Change size on subsequent page load
changeSize();

<button class="fontSize" type="button" value="-2">A-</button>
<button class="fontSize" type="button" value="2">A+</button>

<h1>Lorem ipsum...</h1>
<p>Lorem ipsum...</p>

使用单选按钮

const EL_body = document.querySelector("body");
const ELS_fontSize = document.querySelectorAll("[name='fontSize']");
localStorage.fontSize = localStorage.fontSize || 16; // Read or default to 16px

function changeSize() {
  ELS_fontSize.forEach(el => el.checked = el.value === localStorage.fontSize);
  EL_body.style.fontSize = `${localStorage.fontSize}px`;
}

ELS_fontSize.forEach(el => el.addEventListener("change", function() {
  localStorage.fontSize = el.value;
  changeSize();
}));

// Change size on subsequent page load
changeSize();

[name="fontSize"]+span {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid currentColor;
}

[name="fontSize"]:checked+span {
  color: #0bf;
}

<label><input type="radio" name="fontSize" value="14" hidden><span>A-</span></label>
<label><input type="radio" name="fontSize" value="16" hidden checked><span>A</span></label>
<label><input type="radio" name="fontSize" value="18" hidden><span>A+</span></label>

<h1>Lorem ipsum...</h1>
<p>Lorem ipsum...</p>

使用 select 盒子

const EL_body = document.querySelector("body");
const EL_fontSize = document.querySelector("#fontSize");
localStorage.fontSize = localStorage.fontSize || 16; // Read or default to 16px

function changeSize() {
  EL_fontSize.value = localStorage.fontSize; // Update select value;
  EL_body .style.fontSize = `${localStorage.fontSize}px`;
}

EL_fontSize .addEventListener("change", function() {
  localStorage.fontSize = this.value;
  changeSize();
});

// Change size on subsequent page load
changeSize(); 

<select id="fontSize">
  <option value="14">Small</option>
  <option value="16">Normal</option>
  <option value="18">Big</option>
</select>
<h1>Lorem ipsum...</h1>
<p>Lorem ipsum...</p>