SeouliteLab

jQuery의 .outerHeight() 메서드: 요소의 외부 높이 가져오기 본문

카테고리 없음

jQuery의 .outerHeight() 메서드: 요소의 외부 높이 가져오기

Seoulite Lab 2024. 3. 27. 10:42

jQuery의 .outerHeight() 메서드는 선택한 요소의 외부 높이를 가져옵니다. 이는 요소의 내부 콘텐츠와 패딩(padding), 테두리(border) 및 선택적으로 마진(margin)의 높이를 모두 포함합니다. 이 메서드는 보이는 콘텐츠를 기반으로 하며, 가상의 상자 모델(Virtual Box Model)을 사용하여 계산합니다.

예제 1: 외부 높이 가져오기

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .outerHeight() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // 외부 높이 가져오기 예제
  var outerHeight = $('.box').outerHeight();
  console.log('외부 높이:', outerHeight); // 출력 결과: 외부 높이: 140
});
</script>
<style>
.box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid #000;
  margin: 10px;
  background-color: #f0f0f0;
}
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

예제 2: 외부 높이 설정하기

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .outerHeight() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // 외부 높이 설정하기 예제
  $('.box').outerHeight(200);
  var newOuterHeight = $('.box').outerHeight();
  console.log('변경된 외부 높이:', newOuterHeight); // 출력 결과: 변경된 외부 높이: 200
});
</script>
<style>
.box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid #000;
  margin: 10px;
  background-color: #f0f0f0;
}
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>
저작자표시 비영리 변경금지 (새창열림)