前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >给网站加上全局字体增大减小功能(自适应) JavaScript

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

作者头像
xlj
发布2021-07-14 12:10:32
9480
发布2021-07-14 12:10:32
举报
文章被收录于专栏:XLJ的技术专栏XLJ的技术专栏

简述

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

代码

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

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

代码语言:javascript
复制
<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 文件里

代码语言:javascript
复制
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 如果有前端基础的可以自行修改,不仅仅局限于全局字体大小

代码语言: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';
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021-04-16,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 简述
  • 代码
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档