需要的结果是点击按钮,字体放大或缩小以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就得到了一个小数,所以这时候在循环相加或相减,都是加上我们循环里面的数了。