Programming/JAVASCRIPT
자바스크립트 숨기기 보이기
Beat.
2016. 9. 5. 08:33
자바스크립트를 이용해서 평소에도 자주쓰이는 HTML요소를 숨기거나 보이는 것을 만들어 보겠습니다.
간단한 예로 버튼클릭시 div를 숨기기 보이기를 해보겠습니다.
<body>안에 복사붙여넣기 하시고 바로실행 하시면 됩니다.
<script type="text/javascript">
//보이기
function div_show() {
document.getElementById("test_div").style.display = "block";
}
//숨기기
function div_hide() {
document.getElementById("test_div").style.display = "none";
}
</script>
<div style="border: 1px solid" id="test_div">내용입니다.</div>
<input type="button" value="보이기" onclick="div_show();"/>
<input type="button" value="숨기기" onclick="div_hide();"/>
//보이기
function div_show() {
document.getElementById("test_div").style.display = "block";
}
//숨기기
function div_hide() {
document.getElementById("test_div").style.display = "none";
}
</script>
<div style="border: 1px solid" id="test_div">내용입니다.</div>
<input type="button" value="보이기" onclick="div_show();"/>
<input type="button" value="숨기기" onclick="div_hide();"/>
<body>안에 복사붙여넣기 하시고 바로실행 하시면 됩니다.
간단하죠?
간단하게 생각하시면 됩니다.
display = "block"은 보이기
display = "none"은 숨기기
display를 block나 none로 속성만 변경해주시면 됩니다.