목차
- display 예제 - 클릭 시 특정요소 숨기기
- display 정의
- display 구문
- 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>
결과보기
