[jQuery] 특정 엘리먼트내 텍스트의 폰트 사이즈 변경하기

2013-10-06 by 편리

어제 작성했던 특정 엘리먼트의 하위 엘리먼트 폰트사이즈를 일정한 비율로 변경하기를 수정해서 텍스트노드를 포함하고 있을 경우에도 처리가 되도록 수정을 했다. 이 코드 역시 완벽하다고 할 수는 없고.. 특정 상황에서는 폰트 사이즈가 변경되지 않는 경우도 생길 수가 있다. 배포 예정 솔루션에 맞춰서 작업을 해서 다른 경우는 수정이 힘들 수도 있다.

/**
 * 텍스트 리사이즈
**/

function font_resize(id, act)
{
    var $elements = $("#"+id+" *").not("select").not("option");
    $elements.removeClass("applied");
    var count = parseInt(get_cookie("ck_font_resize_count"));

    if(isNaN(count))
        count = 0;

    $elements.each(function() {
        if($(this).hasClass("no_text_resize"))
            return true;

        if($(this).children().length != 0) {
            return true;
        } else {
            set_font_size($(this), act);

            // 텍스트 노드가 있는지 체크
            var $parent = $(this).parent();
            var text = $parent.contents().filter(function() {
                return this.nodeType == 3;
            }).text().replace(/s*/, "");

            if(text.length) {
                // 텍스트노드의 형제가 있을 경우 마지막 형제에
                // 스타일 적용 후 부모에 폰트 스타일 적용
                var $child = $parent.children();
                var chdlen = $child.length;
                if(chdlen == ($child.index($(this)) + 1)) {
                    set_font_size($parent, act);
                }
            }
        }
    });
}

/**
 * font size 적용
**/

function set_font_size(el, act)
{
    if(el.hasClass("applied"))
        return true;

    var x = 0;
    var fs = el.css("font-size");
    var unit = fs.replace(/[0-9.]/g, "");
    var fsize = parseFloat(fs.replace(/[^0-9.]/g, ""));
    var nfsize;

    if(!fsize)
        return true;

    if(unit == "em")
        x = 1;

    if(act == "increase") {
        nfsize = (fsize * 1.2);
    } else {
        nfsize = (fsize / 1.2);
    }

    nfsize = nfsize.toFixed(x);
    el.css("font-size", nfsize+unit).addClass("applied");
}

/**
 * font_resize 함수를 반복 할 때 사용
**/

function font_resize2(id, act, loop)
{
    for(i=0; i<loop; i++) {
        font_resize(id, act);
    }
}

어제 작성했던 코드는 스타일이 중복적용되는 문제가 있었는데.. 이 부분은 class를 추가하는 방법으로 해서 class가 없을 경우에만 스타일을 적용하도록 수정했다. 또한 텍스트노드에 대한 처리 부분도 추가됐는데 이 부분이 문제갈 될 수 있는 소지가 있다. 특정한 구조가 정해진 것이 아니기 때문에 이 부분은 계속적으로 체크하면서 수정해야한다.

Leave a Reply Cancel reply