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），学习愉快哦!