HTML 태그의 요소의 치수 값을 구하려고 할 때, 정확한 개념을 모르면 이게 왜 이렇게 넓이와 높이 값이 나오는지 헷갈린다.
정확하게 요소의 어떤 부분의 값을 가져오는지 파헤쳐보자!
들어가기 앞서 위 메서드는 어떤 의미를 갖는지 확인 후 예제를 통해서 알아보자.
▶ 메서드
| 메서드 | 설명 |
| $(선택자).width() | 요소의 넓이 값 |
| $(선택자).height() | 요소의 높이 값 |
| $(선택자).innerWidth() | 요소의 패딩값을 포함한 넓이 값 |
| $(선택자).innerHeight() | 요소의 패딩값을 포함한 높이 값 |
| $(선택자).outerWidth() | 요소의 패딩 + 보더(border) 값을 포함한 넓이 값 |
| $(선택자).outerHeight() | 요소의 패딩 + 보더(border) 값을 포함한 높이 값 |
예제)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<style type="text/css">
#myDiv {
width:500px;
height:100px;
padding:50px;
border:30px solid red;
font-size: 50pt;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var $myDiv = $('#myDiv');
var $results = $('#results');
$('<p>Computed width: ' + $myDiv.width() + '</p>').appendTo($results);
$('<p>Computed height: ' + $myDiv.height() + '</p>').appendTo($results);
$('<p>Inner width: ' + $myDiv.innerWidth() + '</p>').appendTo($results);
$('<p>Inner height: ' + $myDiv.innerHeight() + '</p>').appendTo($results);
$('<p>Outer width: ' + $myDiv.outerWidth() + '</p>').appendTo($results);
$('<p>Outer height: ' + $myDiv.outerHeight() + '</p>').appendTo($results);
});
</script>
</head>
<body>
<div id="results"></div>
<div id="myDiv">기본 텍스트</div>
</body>
</html>
위 예제를 실행해 보면 요소의 사이즈가 출력을 볼 수가 있다.
결과 화면을 보면
요소의 width : 500
요소의 height : 100
요소의 innerWidth : 600
요소의 innerHeight : 200
요소의 outWidth : 660
요소의 outHeight : 260
이다.
이렇게 나오는 이유는
innerWidth = width(500) + padding(100)
innerHeight = height(100) + padding(100)
outerWidth = width(500) + padding(100) + border(60)
outerHeight = height(100) + padding(100) + border(60)
이렇게 수치가 적용이 된다.
반응형
'web 언어 > jQuery' 카테고리의 다른 글
| jQuery - offset() 메서드 사용법 (0) | 2022.03.25 |
|---|---|
| jQuery - position() 메서드 / 위치값은 어떻게 어떤 이유로 계산되어져 반환받는가 (0) | 2022.03.24 |
| jQuery - checked 어트리뷰트에 추가 플러그인 만들기 (toggle 기능) (0) | 2022.03.22 |
| jQuery - 배열, 객체의 데이터 값으로 태그 리스트 만들기 (0) | 2022.03.22 |
| jQuery - DOM(태그tag) 객체에 데이터(오브젝트)를 저장 및 사용법 (0) | 2022.03.17 |