단비의 코딩 공부 blog

[jquery]버튼 클릭 시 텍스트 크기 조절 본문

javascript&jquery

[jquery]버튼 클릭 시 텍스트 크기 조절

황굽달 2022. 12. 23. 09:48

html

<div id="switcher" class="clear_fix">
    <div class="button" id="switcher-large">-</div>
    <div class="txt_label">텍스트 크기</div>
    <div class="button" id="switcher-small">+</div>
</div>

 

jquery

$(document).ready(function() {
    $("div.button").click(function() {
    var $text_wrap = $("div.text_wrap");
    var currentSize = $text_wrap.css("fontSize");

    //alert(currentSize);
    var num = parseFloat(currentSize, 10);
    var unit = currentSize.slice(-2);

    if(this.id == "switcher-small"){
    num *= 1.2;
    } else if(this.id == "switcher-large") {
    num /= 1.2;
    }

    $text_wrap.css("fontSize", num + unit);
    });
});