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