Display 옵션 : Inline (Text 박스가 옆으로 보여진다 )
Display 옵션 : block (Text 박스가 아래로 보여진다)
Display 옵션 : none (Text 박스가 보여지지 않는다)
################# Source #################
<html>
<head>
<title> display 옵션의 'none' 과 'inline' 과 'block'의 차이점 </title>
<script language="JavaScript">
<!--
window.onload = function() {
document.getElementById("div_description").style.display = "none";
}
// Reason 이 변경되면 넣는다.
function changeCode1() {
var descCode = document.getElementById("descCode");
var description = document.getElementById("description");
if(descCode.value == "99") {
document.getElementById("div_description").style.display = "inline";
description.value = "";
} else if(descCode.value == "00"){
document.getElementById("div_description").style.display = "block";
description.value = "";
} else {
description.value = descCode.options[descCode.selectedIndex].text;
document.getElementById("div_description").style.display = "none";
}
}
//-->
</script>
</head>
<body>
<table border="0" cellspacing="1" cellpadding="3" style="width:97%">
<col width="10%" />
<col />
<tr>
<td colspan="2">
<P CLASS="para" ID="number1">
<b>display 옵션의 'none' 과 'inline' 과 'block'의 차이점 확인</b><br>
<b>div / span 에 상관없이 적용된다.</b>
</P>
</td>
</tr>
<tr>
<td>Reason</td>
<td>
<select name="descCode" style="width:10%" OnChange="changeCode1()">
<option value="">-- 선택 --</option>
<option value="00">block</option>
<option value="99">inline</option>
</select>
<div id="div_description">
<input type="text" name="description" label="Description"
style="width:65%" maxlength="1000" />
</div>
</td>
</tr>
</table>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| [script] select 박스 선택시 웹 접근성 준수 (0) | 2011.06.27 |
|---|---|
| [JavaScript] Javascript 에서 reload (0) | 2010.10.27 |
| [script] 이미지 크게 보기 script (0) | 2010.08.03 |
| [Script] 이미지(img) 엑박 안뜨게 하기!! (0) | 2010.07.15 |
| [script] 작은 이미지 원본 이미지로 보이기 (0) | 2010.05.06 |