巅峰霸主 > 代码分享 > 源代码分享 >

jQuery点击字体放大缩小加小数,单位为rem解决方法

时间:2021-03-29 13:19:44  来源:巅峰霸主网  作者:烈火大地 点击:
摘要:用jQuery来实现点击按钮增大或缩小字体,由于1rem区间太大,需要点击加0.5这样的小数,但是JavaScript还是不太好实现,倔强方法是先定义一个整数再除法运算……

需要的结果是点击按钮,字体放大或缩小以rem为单位,下面是代码。

1、HTML代码:

<span id="fjia" class="btn btn-outline-secondary btn-sm me-1" title="放大字体">A+</span>
<span id="fjian" class="btn btn-outline-secondary btn-sm me-3" title="缩小字体">A-</span>
<div id="fsize" class="neirong">地方</div>

2、jQuery代码:

$(document).ready(function () {
  var oPtxt = document.getElementById("fsize");
  var oBtn1 = document.getElementById("fjia");
  var oBtn2 = document.getElementById("fjian");
  var num = 10; /*定义一个初始变量*/
  oBtn1.onclick = function () {
    if (num < 70) {
      num += 3;
      num++;
      var result = num / 10;
      oPtxt.style.fontSize = result + 'rem';
    }
  };
  oBtn2.onclick = function () {
    if (num > 10) {
      num -= 3;
      num--;
      var result = num / 10;
      oPtxt.style.fontSize = result + 'rem';
    }
  };

});

原理:先给num定义一个初始值,然后改变"num+="和“num-=”的数字来达到增大10倍的整数,然后将这个整数除以10就得到了一个小数,所以这时候在循环相加或相减,都是加上我们循环里面的数了。

(责任编辑:陆柏熺)
评价:
用户名: 验证码: 看不清?点击更换


关注站长自媒体 获取更多优质内容

  • 百家号
    百家号
  • 头条号
    头条号
  • 企鹅号
    企鹅号

2019-2021 ©巅峰霸主网 京ICP备12023415号-2
返回
顶部