[DOM_Style] JS - height 속성 - 요소 높이 설정/반환 (= height속성 = 하이트속성) ※ 요소 세로길이 반환/설정

목차

1. height 예제 - <button> 요소 높이 설정
2. height 정의
3. height 구문
4. height 예제 - <div> 요소 높이 변경
5. height 예제 - <img> 요소 너비/높이 변경
6. height 예제 - <img> 요소 높이 반환

height 예제 - <button> 요소 높이 설정

 

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

<script>

function homzzang() {

  document.getElementById("hz").style.height = "50px";

}

</script>

 

결과보기

height 정의

 

요소 높이 설정/반환

 

---

 

1. 

• 높이는 블럭요소 (또는 인라인블럭요소)나 absolute (또는, fixed) 설정된 요소에서만 사용 가능. (※ 인라인요소엔 사용 불가)
• 내용이 높이 초과 시, overflow 속성으로 내용 제어 가능.

 

2. cf.

width 속성 - 요소 너비 설정/반환.

 

3.

• 기본값: auto
• 반환값: 요소 높이 나타내는 문자열
• CSS버전: CSS1
• 모든 브라우저 지원.

height 구문

 

반환

object.style.height

 

설정

object.style.height = "auto|length|%|initial|inherit"

 

---

[속성값]

 

auto

브라우저가 높이 자동 설정. (기본값)

 

length

px 등 길이 단위로 높이 지정.

 

%

부모요소 높이의 일정 %로 지정.

 

initial

이 속성의 기본값으로 지정.

 

inherit

부모요소의 속성값 상속.

 

height 예제 - <div> 요소 높이 변경

 

<style> 

#hz {width: 300px; height: 100px; background-color: coral; color: white;}

</style>

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

<div id="hz">

  <h2>홈짱닷컴 Homzzang.com</h2>

</div>

<script>

function homzzang() {

  document.getElementById("hz").style.height = "200px";

}

</script>

 

결과보기

height 예제 - <img> 요소 너비/높이 변경

 

<img id="hz" src="https://i.imgur.com/PQNhCln.gif" width="56" height="56">

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

<script>

function homzzang() {

  document.getElementById("hz").style.height = "100px";

  document.getElementById("hz").style.width = "100px";

}

</script>

 

결과보기

height 예제 - <img> 요소 높이 반환

 

<img id="hz" src="https://i.imgur.com/PQNhCln.gif" style="width:56px;height:56px;">

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

<script>

function homzzang() {

  alert(document.getElementById("hz").style.height);

}

</script>

 

결과보기

---

PS. 높이값이 HTML 속성으로 지정된 경우, 반환 X

<img id="hz" src="https://i.imgur.com/PQNhCln.gif" width="56" height="56">

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

<script>

function homzzang() {

  alert(document.getElementById("hz").style.height);

}

</script>

 

결과보기