제목 : 활용예제 : <textarea> 크기를 동적으로 증가/감소
<!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>