특정 엘리먼트의 하위 엘리먼트 폰트사이즈를 일정한 비율로 변경하기

인터넷 사이트를 보면 텍스트 크리를 크게하거나 작게하는 버튼을 본 적이 있다. 지금 작업 중인 웹접근성 게시판 솔루션에도 이 기능을 적용해야 하는데.. 요구 사항이 일률적인 폰트사이의 변경이 아닌 각 엘리먼트 마다 일정한 비율로 텍스트의 사이즈를 변경해달라는 것이었다. 쉽지 않을 것이라 생각은 했지만.. 꽤 많은 삽질을 한 후에 아래의 코드를 얻을 수 있었다. 특정 엘리먼트의 하위 엘리먼트들을 모두 체크해서 각각의 폰트 사이즈를 구하고 일정한 비율로 새로운 사이즈를 구하고 이걸 다시 적용하는 일련의 과정이다.

function text_increase()
{
    var $elements = $("#container *:visible");
    var fs = tx = unit = "";
    var fsize;
    var x = 0;

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

        fs = $(this).css("font-size");
        tx = $(this).html();
        unit = fs.replace(/[0-9]/g, "");
        fsize = parseFloat(fs.replace(/[^0-9.]/g, ""));

        if(!fsize)
            return true;

        if(tx.search("<") > -1)
            return true;

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

        nfsize = (fsize * 1.2);
        nfsize = nfsize.toFixed(x);

        $(this).css("font-size", nfsize+unit);
    });
}

코드가 약간은 어설프지만 일단 작동은 된다. 그런데 문제는 하위 엘리먼트를 구하는데 오류가 있다는 것이다. 간혹 빠지는 엘리먼트도 있고.. 특정 상황이 정해진 것이 아니기 때문에 이 부분은 지속적으로 테스트하면서 코드를 보완해야겠다고 생각 중이다. 위 함수는 텍스트를 크게하는 것인데 비율수치만 바꾸면 작게 하는 것도 가능하다.