특정 영역에서 폰트사이즈 컨트롤러 (특정 태그의 폰트를 선택적으로 컨트롤)

에디터를 통해서 들어온 텍스트의 폰트사이즈를 조정하기 위하여 만든 컨트롤러.

HTML

- cnt-box의 내용이 에디터를 통하여 들어온 텍스트라고 가정하였음.

<input type="button" id="fnt-size-down" class="fnt-size-down" title="글자크기 키우기">
<input type="button" id="fnt-size-up" class="fnt-size-up" title="글자크기 줄이기">
 
<div class="view-cnt">
    <div class="cnt-box">
       <p style="color: #333; font-family: Noto-regular, sans-serif; font-size: 17px;">텍스트</p>
       <b style="color: #333; font-family: Noto-regular, sans-serif; font-size: 14px;">채용 공고문</b>
       <span style="color: #333; font-family: Noto-regular, sans-serif; font-size: 14px;">span속의 텍스트</span>
    </div>
</div>    

JS 

- 텍스트를 컨트롤 하는 태그들을 찾아서 추가해주면 된다.

- each문을 사용하여 태그들의 폰트 사이즈를 찾은 후 폰트사이즈를 +1 하는 방식으로 처리 

- each문을 통해서 가져온 폰트 사이즈가 배열로 들어오는 점에 주의하여 number형으로 변환 후 처리.

// 폰트 사이즈 컨트롤러
  $("#fnt-size-up").on('click', function () {
    $(".view-cnt span").each(function (){
      var fsize = $(this).css('font-size').split('px');
      var fsizeUp = parseInt(fsize[0]);
      $(this).css({"font-size": fsizeUp+1});
    });
    $(".view-cnt p").each(function (){
      var fsize = $(this).css('font-size').split('px');
      var fsizeUp = parseInt(fsize[0]);
      $(this).css({"font-size": fsizeUp+1});
    });
    $(".view-cnt b").each(function (){
      var fsize = $(this).css('font-size').split('px');
      var fsizeUp = parseInt(fsize[0]);
      $(this).css({"font-size": fsizeUp+1});
    });
  });
 
  $("#fnt-size-down").on('click', function () {
    $(".view-cnt span").each(function (){
      var fsize = $(this).css('font-size').split('px');
      var fsizeDown = parseInt(fsize[0]);
      $(this).css({"font-size": fsizeDown-1});
    });
    $(".view-cnt p").each(function (){
      var fsize = $(this).css('font-size').split('px');
      var fsizeDown = parseInt(fsize[0]);
      $(this).css({"font-size": fsizeDown-1});
    });
    $(".view-cnt b").each(function (){
      var fsize = $(this).css('font-size').split('px');
      var fsizeDown = parseInt(fsize[0]);
      $(this).css({"font-size": fsizeDown-1});
    });
  });
 // END :  폰트 사이즈 컨트롤러