반응형
함수 하나로 화면 영역을 보이게 하거나 사라지게 토클 기능을 구현할 수 있습니다. 흔히 내용이 많아서 더보기 버튼을 구현할 때 많이 사용합니다. 숨겨 두었다가 클릭하게 다시 펼쳐 지면서 상세 내용을 볼 수 있게 하는 것입니다.
▼ document.getElementById() 함수로 DIV 개체를 가져옵니다. 처음에는 함수가 실행되지 않기 때문에 내용이 보이겠죠. 다시 [내용보기] 를 클릭하게 되면 DIV 내에 있는 HTML 이 사라지게 됩니다. display 속성에 ‘none’ 을 세팅 했기 때문입니다. 현재 style.display 가 none 인지 아닌지 if 로 판단한 후 block, none 을 번갈아 가며 바꾸는 것입니다.
function doDisplay(){
var con = document.getElementById("myDIV");
if(con.style.display=='none'){
con.style.display = 'block';
}else{
con.style.display = 'none';
}
}
▼ 아래는 숨기기 기능을 구현한 전체 소스입니다. “내용보기” 텍스트를 클릭했을 때 doDisplay() 함수가 실행되도록 만들었으며 함수 내부에서 display 속성값을 none 과 block 로 번갈아 가면서 셋팅 합니다.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var bDisplay = true; function doDisplay(){
var con = document.getElementById("myDIV");
if(con.style.display=='none'){
con.style.display = 'block';
}else{
con.style.display = 'none';
}
}
</script>
</head>
<body>
<a href="javascript:doDisplay();"> > 내용보기</a><br/><br/>
<div id="myDIV">
<h1>내용을 접거나 펴는 방법</h1>
<p>display block 속성값은 내부 요소를 나타나게 하며 none 는 사라지게 합니다.</p>
</div>
</body>
</html>
▼ 아래 두 개의 그림은 위의 소스를 실행했을 때 보여 지게 되는 결과입니다. 내용보기를 클릭하면 보였다가 다시 클릭하면 사라지게 됩니다. 참고하세요.
※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ 자바스크립트 웹 소스 테스트 사이트 소개 ▶ 자바스크립트 escape, encodeURI, encodeURIComponent 인코딩 함수 ▶ 자바스크립트 정규표현식으로 ltrim, rtrim 공백 제거 함수 구현하는 방법 ▶ 자바스크립트 display 속성 이용해서 접거나 펴는 방법 ▶ 자바스크립트 숫자 여부를 판단하는 isNaN 함수 사용하기 |
반응형
댓글을 달아 주세요
익명 2018.03.08 14:33 댓글주소 수정/삭제 댓글쓰기
감사합니다 ㅜㅜ