HTML 글자크기 크게 또는 작게 > 기술자료

• 목록
• 게시판 리스트 옵션
  • 검색

그누보드에서 사용하고 있는 소스입니다.

FontResize.js  파일을 생성한후 아래의 내용을 삽입합니다.

// 여기부터  FontResize.js 파일 내용입니다.
if (typeof(COMMON_JS) == 'undefined') { // 한번만 실행
    var COMMON_JS = true;

    // 쿠키 입력
    function set_cookie(name, value, expirehours, domain) {
        var today = new Date();
        today.setTime(today.getTime() + (60*60*1000*expirehours));
        document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + today.toGMTString() + ";";
        if (domain) {
            document.cookie += "domain=" + domain + ";";
        }
    }

    // 쿠키 얻음
    function get_cookie(name) {
        var find_sw = false;
        var start, end;
        var i = 0;

        for (i=0; i<= document.cookie.length; i++) {
            start = i;
            end = start + name.length;

            if(document.cookie.substring(start, end) == name) {
                find_sw = true
                break
            }
        }

        if (find_sw == true) {
            start = end + 1;
            end = document.cookie.indexOf(";", start);

            if(end < start)
                end = document.cookie.length;

            return document.cookie.substring(start, end);
        }
        return "";
    }

    // 쿠키 지움
    function delete_cookie(name) {
        var today = new Date();

        today.setTime(today.getTime() - 1);
        var value = get_cookie(name);
        if(value != "")
            document.cookie = name + "=" + value + "; path=/; expires=" + today.toGMTString();
    }
}

function getFontSize() {
    var fontSize = parseInt(get_cookie("ck_fontsize")); // 폰트크기 조절
    if (isNaN(fontSize)) { fontSize = 12; }
    return fontSize;
}

function scaleFont(val) {
    var fontSize = getFontSize();
    var fontSizeSave = fontSize;
    if (val > 0) {
        if (fontSize <= 18) {
            fontSize = fontSize + val;
        }
    } else {
        if (fontSize > 12) {
            fontSize = fontSize + val;
        }
    }
    if (fontSize != fontSizeSave) {
        drawFont(fontSize);
    }
    set_cookie("ck_fontsize", fontSize, 30);
}

function drawFont(fontSize) {
    if (!fontSize) {
        fontSize = getFontSize();
    }

    var subject=document.getElementById("writeSubject");
    var content=document.getElementById("writeContents");
    var comment=document.getElementById("commentContents");
    var wr_subject=document.getElementById("wr_subject");
    var wr_content=document.getElementById("wr_content");

    if (comment) {
        var commentDiv = comment.getElementsByTagName("div");
        var lineHeight = fontSize+Math.round(1.1*fontSize);
    }

    fontSize = fontSize + "px";

    if (subject)
        subject.style.fontSize=fontSize;
    if (content)
        content.style.fontSize=fontSize;
    if (wr_subject)
        wr_subject.style.fontSize=fontSize;
    if (wr_content)
        wr_content.style.fontSize=fontSize;
    if (commentDiv) {
        for (i=0;i<commentDiv.length;i++) {
            commentDiv[i].style.fontSize=fontSize;
        }
    }
}
// 여기까지는  FontResize.js 파일 내용입니다.




홈페이지 방문객들이 직접 글자 크기를 제어하고픈 HTML에  FontResize.js 파일을 삽입 합니다.

<!-- js 파일을 호출할때는 적용하고자 하는 페이지에 직접 삽입합니다.
PHP파일로 include 하면 쿠키생성이 안되어서 축소/확대가 온전히 작동하지 않습니다. -->
<script language="javascript" src="FontResize.js"></script>

<a href="javascript:scaleFont(+1);">글자 확대</a>
<a href="javascript:scaleFont(-1);">글자 축소</a>

<div id=contents>
<table width="100%" cellspacing="0" cellpadding="0">
  <tr>
       <td><span id="writeSubject">하나씩만 적용1</span></td>
  </tr>
  <tr>
    <td>
      <span id="writeContents">하나씩만 적용2</span>
    </td>
  </tr>
</table>
</div>

<div id="commentContents">
<table width="100%" cellspacing="0" cellpadding="0">
  <tr>
       <td><div>모두 적용1</div></td>
  </tr>
  <tr>
    <td><div>모두 적용2</div></td>
  </tr>
</table>
</div>