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

前端 潘老师 2个月前 (12-29) 48 ℃ (0) 扫码查看

在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),学习愉快哦!


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/12712.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】