SeouliteLab

jQuery의 .height() 메서드: 요소의 높이를 가져오고 설정하기 본문

프로그래밍

jQuery의 .height() 메서드: 요소의 높이를 가져오고 설정하기

Seoulite Lab 2024. 3. 27. 09:17

jQuery에서 요소의 높이를 가져오거나 설정하는 데 사용되는 .height() 메서드에 대해 알아보겠습니다.

jQuery의 .height() 메서드는 선택한 요소의 높이를 가져오거나 설정하는 데 사용됩니다. 이 메서드는 CSS의 height 속성을 통해 요소의 높이를 계산합니다.

예제:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery .height() 메서드 예제</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // 높이 가져오기 예제
  var height = $('.box').height();
  console.log('높이:', height); // 출력 결과: 높이: 100

  // 높이 설정하기 예제
  $('.box').height(200);
  var newHeight = $('.box').height();
  console.log('변경된 높이:', newHeight); // 출력 결과: 변경된 높이: 200
});
</script>
<style>
.box {
  width: 100px;
  height: 100px;
  background-color: #f0f0f0;
}
</style>
</head>
<body>

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

</body>
</html>
저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery의 .width() 메서드: 요소의 너비 가져오기  (0) 2024.03.27
jQuery의 .innerHeight() 메서드: 요소의 내부 높이를 가져오기  (0) 2024.03.27
jQuery의 click 이벤트 핸들러 활용하기  (0) 2024.03.27
jQuery의 .css() 메서드를 활용하여 요소 스타일 변경하기  (0) 2024.03.26
jQuery의 반복문 - for 문 활용하기  (0) 2024.03.26
'프로그래밍' Related Articles more