자바스크립트(Javascript) display 속성 이용해서 접거나 펴는 방법

자바스크립트

자바스크립트(Javascript) display 속성 이용해서 접거나 펴는 방법

 

함수 하나로 영역을 보이게 하거나 사라지게 토클 기능을 구현할 수 있습니다. 흔히 내용이 많아서 더보기 버튼을 두고 숨겨 두었다가 클릭하게 다시 펼쳐 지면서 상세 내용을 볼 수가 있는 것이죠.

 

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>

 

아래 두 개의 그림은 위의 소스를 실행했을 때 보여 지게 되는 결과입니다. 내용보기를 클릭하면 보였다가 다시 클릭하면 사라지게 됩니다. 참고하세요.

 

자바스크립트(Javascript) display 속성 이용해서 접거나 펴는 방법

 

자바스크립트(Javascript) display 속성 이용해서 접거나 펴는 방법

Posted by 녹두장군

댓글을 달아 주세요

  1. 익명 2018.03.08 14:33  댓글주소  수정/삭제  댓글쓰기

    감사합니다 ㅜㅜ