목차
- height 예제 - <button> 요소 높이 설정
- height 정의
- height 구문
- height 예제 - <div> 요소 높이 변경
- height 예제 - <img> 요소 너비/높이 변경
- 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>
결과보기
