js实现动态调整文章字体大小并记住用户设置

在wordpress文章模板中，我们经常为了适应不同用户的使用习惯，而需要提供动态调整字体大小的功能，比如老年人可能就会喜欢调大字体才能阅读的更舒服，让我们来一起看下js如何实现动态调整文章字体大小的方法吧。

前置条件

我们先准备一个文章模板，大致结构代码如下：

<div class="entry-content">
 这里是文章内容
</div>

然后我们要新增字体调大调小的按钮，这个你可以自己找两个图标，一个A+一个A-，或者你直接搞两个按钮也行，这里我们演示方便就搞两个文字：

<a href="javascript:;" title="字体调小" id="j-font-small">字体调小</a>
<a href="javascript:;" title="字体调大" id="j-font-big">字体调大</a>

 调节字体大小代码实现

接下来我们来实现调节字体大小的js代码，注意以下方法要依赖jquery.js或者jquery.min.js：

$(function(){
    const step = 2;
    var base = 16;// 字体原大小
    // 字体变小
    $("#j-font-small").on("click", function(){
        base -= step;
        if(base < 10) {//最小大小限制为10px
            base += step;
            return;
        }
        $(" .entry-content").css("font-size", base+'px');
    })
    // 字体增大
    $("#j-font-big").on("click", function(){
        base += step;
        $(".entry-content").css("font-size", base+'px')
    })
})

以上代码就能实现字体大小调节，并且最小大小限制为10px，最大无上限。但是以上只能保证单次单个页面有效，如果用户刷新页面或者新打开一个文章，字体大小又恢复了，显得很不友好，因此看下面的进阶版代码。

进阶优化实现记住用户设置的字体大小

为了记住用户设置的字体大小，下次用户访问或者看新页面文章，都保持设置好的字体大小，我们可以使用cookie实现，因此要引入jquery.cookie.js文件，然后优化代码如下：

$(function(){
    const size = initFontSize();
    const step = 2;
    var base = 16;
    if(size) {
        base = Number(size);
    }
    // 字体变小
    $("#j-font-small").on("click", function(){
        base -= step;
        if(base < 10) {
            base += step;
            return;
        }
        $(".entry-content").css("font-size", base+'px');
        setFontCookie(base);
    })
    // 字体增大
    $("#j-font-big").on("click", function(){
        base += step;
        $(".entry-content").css("font-size", base+'px')
        setFontCookie(base);
    })
})
// 初始化用户设置的大小
function initFontSize() {
    const key = "post-fontsize";
    var size = $.cookie(key);
    if(size) {
        $(".entry-content").css("font-size", size+'px')
    }
    return size;
}
// 更新大小
function setFontCookie(fontsize) {
    const key = "post-fontsize";
    // 默认过期时间为365天
    $.cookie(key, fontsize, { expires: 365, path: '/' });
}

以上就是js实现动态调整文章字体大小的全部内容，希望对你有帮助，欢迎长期关注潘子夜个人博客（www.panziye.com），学习愉快哦!

喜欢 (0)赏

【请潘老师喝杯Coffee吧！】

分享 (0)