[DOM_Style] JS - display 속성 ★ - 요소 표시 방법 설정/반환 (= display속성 = 디스플레이속성) 상속X ※ 특정요소 숨기기

목차

1. display 예제 - 클릭 시 특정요소 숨기기
2. display 정의
3. display 구문
4. display 예제 - 무조건 특정요소 숨기기

display 예제 - 클릭 시 특정요소 숨기기

 

<style> 

#hz {

  width: 500px;

  height: 100px;

  background-color: lightblue;

}

</style>

<button onclick="homzzang()">클릭</button>

<div id="hz">홈짱닷컴 Homzzang.com</div>

<script>

function homzzang() {

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

}

</script>

결과보기

display 정의

 

요소의 표시 방법 반환/설정.

 

---

 

1.

• HTML 요소는 (인라인/인라인블럭/블럭) 중 하나임.
• display 속성 이용하면 이러한 속성을 변경 가능함.
• display 속성 이용하면, 요소 (숨기기/보이기) 가능.

 

2. cf.

• display:none - 요소를 숨기고, 다른 요소가 해당 자리를 차지 O
• visibility:hidden - 요소를 숨기나, 다른 요소가 해당 자리를 차지 X

 

3.

요소가 블럭요소이더라도, float 속성 이용해 옆으로 나열 가능.

 

4.

모든 브라우저 지원.

display 구문

 

반환

object.style.display

 

설정

object.style.display = value

 

---

[속성값] - value 자리에 올 수 있는 값 종류

 

display 속성값 확인하기

https://homzzang.com/b/css-107

 

display 예제 - 무조건 특정요소 숨기기

 

<h2 id="hz">홈짱닷컴 Homzzang.com</h2>

<script>

hz.innerHTML = "";

hz.style.display = "none";

</script>

 

결과보기