JS实现整个DIV里的字号整体放大或缩小

JS实现对DIV里内容的字体方法或缩小

JS实现整个DIV里的字号整体放大或缩小

html代码

只写主要代码,样式可以自己写

<div class="content_sms">

这是需要放大或缩小的内容

div>

<div id= "bigFontSize">
      放大
div>
<div id= "smallFontSize">
      缩小
div>

JS代码

$(document).ready(function () {
    var fontSize = $(".content_sms").css("font-size");
    console.log(fontSize)
    //取得当前字体大小
    var fontSizeNumber = parseFloat(fontSize , 10);
    console.log(fontSizeNumber)
    //取得单位
    var unit = fontSize.slice(-2);
    console.log(unit)

    var lineSize = $(".content_sms").css("line-height");
    console.log(lineSize)
    //取得当前字体大小
    var lineSizeNumber = parseFloat(lineSize , 10);
    console.log(lineSizeNumber)
    //取得单位
    var lineUnit = lineSize.slice(-2);
    console.log(lineUnit)

    //放大字体,bigFontSize为按钮id
    $("#bigFontSize").click(function () {

      if(fontSizeNumber < '30'){
        fontSizeNumber += 2;
        $(".content_sms").css("font-size", fontSizeNumber + unit);

        lineSizeNumber += 2;
        $(".content_sms").css("line-height", lineSizeNumber + lineUnit);
      }

    });

    //减小字体,smallFontSize为按钮id
    $("#smallFontSize").click(function () {

      if(fontSizeNumber > '14'){
        fontSizeNumber -= 2;
        $(".content_sms").css("font-size", fontSizeNumber + unit);
        lineSizeNumber -= 2;
        $(".content_sms").css("line-height", lineSizeNumber + lineUnit);
      }

    });
}); 

Original: https://www.cnblogs.com/zxf100/p/14463745.html
Author: 下页、再停留
Title: JS实现整个DIV里的字号整体放大或缩小

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/583384/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • 5.Git版本库创建

    注入产生的原理: 数据库设置为GBK编码: 宽字节注入源于程序员设置MySQL连接时错误配置为:set character_set_client=gbk,这样配置会引发编码转换从而…

    Linux 2022年8月30日
    0279
  • WebBug Java漏洞靶场 Java代码审计

    404. 抱歉,您访问的资源不存在。 可能是网址有误,或者对应的内容被删除,或者处于私有状态。 代码改变世界,联系邮箱 contact@cnblogs.com 园子的商业化努力-困…

    Linux 2023年6月6日
    076
  • RPA 微信财务报销机器人 竹间智能

    bash;gutter:true; 1、首先通过微信对话机器人收集报销信息及内容 2、上传发票并进行OCR识别 3、收集相关的出差信息,支持对话中修改内容 4、完成信息收集后,后台…

    Linux 2023年6月7日
    071
  • 不割韭菜,纯分享:剖析HTML中的类,运维开发必备前端技能,我们一起坚持。

    写在开篇 开篇之前,先提个问题,什么是类?分类吗?可以这么说吧!我们可以给物体分类,也可以给人分类。正所谓,物以类聚,人以群分。难道我们这里是给元素分类?用分类来理解是不准确的啦!…

    Linux 2023年6月7日
    075
  • 【转】自使用linux常用命令练习题

    注入产生的原理: 数据库设置为GBK编码: 宽字节注入源于程序员设置MySQL连接时错误配置为:set character_set_client=gbk,这样配置会引发编码转换从而…

    Linux 2022年8月26日
    0234
  • 用 shell 脚本制造连接频繁中断的场景

    问题的提出 最近在准备客户端的新版本,在内部灰度过程中,发现一类奇怪的 dump,通过查看日志和堆栈,可以确定是因为每次连上后台就被后台断开了、导致多次重连后随机发生的崩溃。dum…

    Linux 2023年6月6日
    063
  • 离线版centos8安装docker笔记

    注入产生的原理: 数据库设置为GBK编码: 宽字节注入源于程序员设置MySQL连接时错误配置为:set character_set_client=gbk,这样配置会引发编码转换从而…

    Linux 2022年11月8日
    0172
  • Linux专项之Apache

    注入产生的原理: 数据库设置为GBK编码: 宽字节注入源于程序员设置MySQL连接时错误配置为:set character_set_client=gbk,这样配置会引发编码转换从而…

    Linux 2022年9月10日
    0195
  • THE EVOLUTION OF INTELLECTUAL FREEDOM;

    分享几张有趣的图: 1:http://www.cs.cmu.edu/~dskarlat/ 2022-03-03 17:47 2:https://www.zhihu.com/ques…

    Linux 2023年6月14日
    055
  • WSL系统安装与使用

    WSL是适用于 Linux 的 Windows 子系统,可让开发人员按原样运行 GNU/Linux 环境 – 包括大多数命令行工具、实用工具和应用程序 – …

    Linux 2023年5月27日
    0104
  • Java 获取Linux 的IP地址

    注入产生的原理: 数据库设置为GBK编码: 宽字节注入源于程序员设置MySQL连接时错误配置为:set character_set_client=gbk,这样配置会引发编码转换从而…

    Linux 2022年8月26日
    0231
  • Ubuntu 环境变量及 ADB 配置

    注入产生的原理: 数据库设置为GBK编码: 宽字节注入源于程序员设置MySQL连接时错误配置为:set character_set_client=gbk,这样配置会引发编码转换从而…

    Linux 2022年8月26日
    0222
  • Linux系统编程—信号捕捉

    前面我们学习了信号产生的几种方式,而对于信号的处理有如下几种方式: 默认处理方式; 忽略; 捕捉。 信号的捕捉,说白了就是抓到一个信号后,执行我们指定的函数,或者执行我们指定的动作…

    Linux 2023年6月14日
    090
  • MySQL——锁和事务管理

    保证数据安全的一种手段。防止数据文件同时被多个用户同时修改,从而造成数据的破坏。 读锁:S锁,例如给一个表加了读锁以后,大家都能读表里面的内容(只能读不能改) 写锁:X锁。加了写锁…

    Linux 2023年6月7日
    059
  • linux函数深入探索——open函数打开文件是否将文件内容加载到内存空间

    注入产生的原理: 数据库设置为GBK编码: 宽字节注入源于程序员设置MySQL连接时错误配置为:set character_set_client=gbk,这样配置会引发编码转换从而…

    Linux 2022年8月11日
    0335
  • JDK8以上提高开发效率

    1 接口的默认方法和静态方法 1.1 接口中可以定义默认方法和静态方法。 默认方法使用default修饰,静态方法和默认方法可以多个; 静态方法通过接口直接调用,默认方法通过接口实…

    Linux 2023年6月13日
    066
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球