HTML/CSS/JAVASCRIPT 강의실

시삽: 레드플러스 님 
게시판 이동:
 제목 : 활용예제 : <textarea> 크기를 동적으로 증가/감소
글번호: 245
작성자: 레드플러스
작성일: 2008/12/16 오후 1:50:00
조회수: 6214
파일: IncreaseAndDecreaseTextBox.zip (1 KB) / 전송수: 2279
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script language="javascript" type="text/javascript">
        // + 버튼 클릭시 텍스트박스의 크기를 40픽셀씩 증가시켜주는 함수
        function IncreaseMultiLineTextBox(obj) {
            var txt1 = document.getElementById(obj);
            txt1.style.height = (parseInt(txt1.style.height.replace("px", "")) + 40) + "px";
        }
        // - 버튼 클릭시 텍스트박스의 크기를 40픽셀씩 감소시켜주는 함수
        function DecreaseMultiLineTextBox(obj) {
            var txt1 = document.getElementById(obj);
            if (parseInt(txt1.style.height.replace("px", "")) > 40)
            {
                txt1.style.height = (parseInt(txt1.style.height.replace("px", "")) - 40) + "px";
            }
        }
    </script>

</head>
<body>
    <img src="images/plus.gif" onclick="IncreaseMultiLineTextBox('txtMultiLine');" style="cursor: hand;"
        alt="증가" />
    <img src="images/minus.gif" onclick="DecreaseMultiLineTextBox('txtMultiLine');" style="cursor: hand;"
        alt="감소" />
    <hr />
    <textarea id="txtMultiLine" name="txtMultiLine" rows="3" cols="40" style="height: 40px;
        overflow: auto;"></textarea>
</body>
</html>
 
이전 글   다음 글 삭제 수정 답변 글쓰기 리스트

(댓글을 남기려면 로그인이 필요합니다.)

관련 아티클 리스트
  제       목 파일 작성자 작성일 조회
이전글 활용예제 : 테이블의 행(tr)을 동적으로 숨기는 기능 : id 속성 사용 ShowHideTableRow.png(5 KB) 레드플러스 2008-12-17 10959
현재글 활용예제 : <textarea> 크기를 동적으로 증가/감소 IncreaseAndDecreaseTextBox.zip(1 KB) 레드플러스 2008-12-16 6214
다음글 활용예제 : 드롭다운리스트로 패밀리 사이트 이동 링크 만들기 imgFamilySite.png(1 KB) 레드플러스 2008-12-13 6532
 
손님 사용자 Anonymous (손님)
로그인 Home