함수 하나로 영역 또는 개체 보이게 하거나 사라지게 할 수 있다.
이런 기능을 토글 기능 이라고 하는데, 더보기 버튼/숨기기 버튼으로 구현도 가능하다.
document.getElementById() 함수로 특정 개체의 ID를 가져와서 처리해야 하는데,
즉 이 기능은 해당 영역 또는 개체가 ID를 가지고 있어야 작동한다.
javascript에서 Id를 가져와서 동적으로 DIV 개체의 display 속성을 block 또는 none으로 변경하는 원리다.
소스를 통해 알아보자.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var bDisplay = true;
function doDisplay(){
var con = document.getElementById("myDIV");
}else{
}
}
</script>
</head>
<body>
<a href="javascript:doDisplay();">> 내용보기</a><br/><br/>
<div id="myDIV">
<h1>내용을 접거나 펴는 방법</h1>
<p>display block 속성값은 내부 요소를 나타나게 하며 none 는 사라지게 합니다.</p>
</div>
</body>
</html>
|
결과를 확인해보면 다음과 같다.
클릭전
클릭후
'IT기술 > javascript' 카테고리의 다른 글
| jQuery] 마우스 클릭하면 마우스 근처에 나타나는 레이어 툴팁(Tooltip) (0) | 2018.10.30 |
|---|---|
| 팝업창에서 부모창의 함수 호출 방법(opener) (0) | 2018.10.30 |
| Layer Pop-up (레이어 팝업) (0) | 2018.10.07 |
| [jquery] 팝업 창(윈도우) 크기 변경 (window.innerHeight window.outerHeight) (1) | 2018.10.07 |
| substring과 substr의 차이점 (0) | 2018.10.07 |
