티스토리 뷰

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();"/>

<body>안에 복사붙여넣기 하시고 바로실행 하시면 됩니다.

간단하죠?

간단하게 생각하시면 됩니다.

display = "block"은 보이기
display = "none"은 숨기기

display를 block나 none로 속성만 변경해주시면 됩니다.






'Programming > JAVASCRIPT' 카테고리의 다른 글

자바스크립트 라디오버튼 값 가져오기  (1) 2016.09.07
자바스크립트 강제 클릭 이벤트  (0) 2016.09.05
자바스크립트 테이블 행 추가 삭제 하기  (0) 2016.09.03
자바스크립트 배열 (2차원배열)  (0) 2016.09.02
자바스크립트 배열 (1차원배열)  (0) 2016.09.02
공유하기 링크
댓글