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);
      }
      
    });
});

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

相关推荐