728x90
[자바스크립트] HTML 엘리먼트 / 태그의 높이 .offsetHeight
기본 구조
//엘리먼트의 높이 = 엘리먼트객체.offsetHeight;
const elem_height = HTMLElement.offsetHeight;샘플 예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Javascript Element height Example</title>
<style>
.content--box {
background-color : royalblue;
color : white;
}
</style>
</head>
<body>
<div class="content--box">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
<p class="print"></p>
<script>
//높이 구하고 p태그에 출력
const height = document.querySelector('.content--box').offsetHeight;
document.querySelector('p.print').innerText = `위 메뉴의 높이는 ${height}px 입니다.`;
</script>
</body>
</html>출력 결과
728x90
댓글