网站加上全局字体增大减小功能(自适应) JavaScript

简述

使用 JavaScript 给网站加上全局字体增大减小的功能，自适应字体有时候小或者大都会影响用户体验，所以添加一个自助调节字体大小的功能是非常方便好用的

代码

使用之前先给 body 标签添加 ID id="body"

html 把这些放到 Body 里面的任何地方就行进阶 : 这些功能不止局限于全局字体大小

<div id="fontSizeDiv">
    <span id="Jia">&nbsp;+&nbsp;</span>
    <span id="Jian">&nbsp;-&nbsp;</span>
    <span id="Guan">关闭</span>

    <span id="fontSize">...</span>
</div>

css 放到 style 标签或者放到已经引用的 css 文件里

div#fontSizeDiv {
    margin: 10% 0;
    width: auto;
    padding: 6px 10px;
    display: inline-block;
    background-color: #eeeeee;
    position: fixed;
    top: 5%;
    right: 0;
}

span#Jia {
    user-select: none;
    cursor: pointer;
    display: inline-block;
    width: 50px;
    font-size: 20px !important;
    line-height: 26px !important;
    background-color: #dddddd;
    border-radius: 2px;

    transition: all 100ms linear;
}
span#Jia:hover {
    box-shadow: 1px 1px 1px #808080;

    transition: all 100ms linear;
}

span#Jian {
    user-select: none;
    cursor: pointer;
    display: inline-block;
    width: 50px;
    font-size: 20px !important;
    line-height: 26px !important;
    border-radius: 2px;

    transition: all 100ms linear;
}
span#Jian:hover {
    background-color: #dddddd;
    transition: all 100ms linear;
}

span#fontSize {
    display: block;
    margin-top: 4px;
    user-select: none;
    cursor: pointer;
    font-size: 20px !important;
    line-height: 26px !important;
}

span#Guan {
    user-select: none;
    cursor: pointer;
    display: inline-block;
    width: 50px;
    font-size: 20px !important;
    line-height: 26px !important;
    border-radius: 2px;

    transition: all 100ms linear;
}
span#Guan:hover {
    background-color: #dddddd;

    transition: all 100ms linear;
}

JavaScript 如果有前端基础的可以自行修改，不仅仅局限于全局字体大小

// 变量
var Body;
var Jia;
var Jian;
var fontSize;
var fontSizeDiv;

var numberJia;
numberJia = 18;

var numberJian;
numberJian = 0;

// 获取全局字体大小并显示
fontSize = document.getElementById('fontSize');
fontSize.innerHTML = window.getComputedStyle(document.body).getPropertyValue('font-size');

// 增加 按钮点击事件
Jia = document.getElementById('Jia').onclick = function () {
    if (numberJia < 50) {
        numberJia ++;

        Body = document.getElementById('body').style.fontSize = numberJia + 'px';
        fontSize.innerHTML = window.getComputedStyle(document.body).getPropertyValue('font-size');
    }
}

// 减少 按钮点击事件
Jian = document.getElementById('Jian').onclick = function () {
    if (numberJia > 0) {
        numberJia --;

        Body = document.getElementById('body').style.fontSize = numberJia + 'px';
        fontSize.innerHTML = window.getComputedStyle(document.body).getPropertyValue('font-size');
    }
}

// 关闭 按钮点击事件
document.getElementById('Guan').onclick = function () {
    fontSizeDiv = document.getElementById('fontSizeDiv').style.display = 'none';
}