티스토리 뷰

Javascript

Javascript 와 jquery 에서 display 로 영역 숨기는 법

travelpark 2019. 4. 3. 21:58
반응형

웹개발을 하다보면 스크립트를 사용해서 화면을 보여주거나 숨겨주는 경우가 많습니다.

 

이런 경우 display 속성을 이용해 영역을 숨기는 법을 확인해보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style> 
#myDIV {
  width: 500px;
  height: 500px;
  background-color: lightblue;
}
</style>
</head>
<body>

<p>Click the "Try it" button to set the display property of the DIV element to "none":</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
This is my DIV element.
</div>

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

<script>
function myFunction() {
  document.getElementById("myDIV").style.display = "none";
}
</script>

</body>
</html>

먼저 Javascript에서 사용하는 법을 확인해보도록 하겠습니다.

document.getElementById("myDIV").style.display = "none";

display 속성이 style 객체에서 사용되기 때문에 제어하려는 id명에 style.display를 붙여 속성값을 넣어줍니다.

 

영역을 숨길 때는 속성값에 none을 보여줄 때는 속성값에 block을 대입해줍니다.

(속성값도 여러 종류가 있고 각기 다른 용도가 있지만 지금은 영역 숨기기에 대해서만 집중하기로 합니다.)

 

다음 jquery에서 영역을 숨기는 법을 확인해보도록 하겠습니다.

$("#myDIV").show(); // display 속성을 block 으로 바꾼다.
$("#myDIV").hide(); // display 속성을 none 으로 바꾼다.

jquery를 사용하면 좀 더 짧고 간단하게 사용할 수 있습니다. 물론 jquery는 일반 Javascript와는 다르게 관련 .js 파일을 상단에 선언해줘야 하지만 너무 간단하고 쉬운 방법이기 때문에 대부분의 사이트가 jquery를 사용하고 있습니다.

 

jquery를 사용하면 .show()와 hide()를 사용해 코드 안에 display를 적지 않고 none과 block 효과를 줄 수 있습니다.

 

맨 위에 있는 샘플 코드 중 myfuction 함수 안에 대신 $("#myDIV").hide();를 넣어주면 동일한 동작을 하게 됩니다.

물론 저 샘플 코드 기준에서는 jquery 관련 .js 파일 상단에 선언해준 다음 사용해야 가능하겠죠.

 

반응형

'Javascript' 카테고리의 다른 글

Javascript 소수점 올림, 버림, 반올림 함수 정리  (0) 2021.07.13
Javascript 랜덤값(난수) 생성하기  (0) 2021.04.15
Javascript 형변환 하기 (문자를 숫자로, 숫자를 문자로) - parseInt(), parseFloat(), Number(), toString(), toFixed()  (0) 2021.04.13
Javascript 에서 숫자 포맷(콤마) 설정하는 법  (0) 2021.04.05
Javascript 현재 페이지 URL 가져오기  (0) 2019.12.03
Javascript 인코딩 함수 escape(), encodeURI(), encodeURIComponent()  (0) 2019.04.04
IE에서 jQuery Ajax 로딩 안될 경우  (0) 2018.04.18
공유하기 링크
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함