HTML DOM Style height 속성은 요소의 높이를 설정하거나 반환하는 데 사용됩니다.
다음은 −
의 구문입니다.높이 속성 설정 -
object.style.height = "auto|length|%|initial|inherit"
위의 속성은 다음과 같이 설명됩니다 -
| 값 | 설명 |
|---|---|
| 자동 | 기본값이며 브라우저에서 설정한 높이입니다. |
| 길이 | 브라우저 높이를 길이 단위로 초기화합니다. |
| % | 상위 요소에 대한 상대적 백분율로 하위 요소 높이를 설정합니다. |
| 초기 | 이 속성을 초기 값으로 초기화합니다. |
| 상속 | 상위 속성 값 상속 |
높이 속성에 대한 예를 살펴보겠습니다 -
예시
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {
width:100px;
height:100px;
background-color:lightpink;
}
#demo2 {
margin-top:4px;
width:100px;
height:100px;
background-color:coral;
}
</style>
<script>
function changeHeight() {
document.getElementById("demo1").style.height="200px";
document.getElementById("Sample").innerHTML="The height for the first div has been increased by 100px";
}
</script>
</head>
<body>
<div id="demo1" >DIV1</div>
<div id="demo2" >DIV2</div>
<p>Change the font height for the text inside above divs by clicking the below button</p>
<button onclick="changeHeight()">Change Height</button>
<p id="Sample"></p>
</body>
</html> 출력
"높이 변경을 클릭하면 " 버튼 -
