728x90
박스모델 관련 메소드
width()
- 가로 크기를 가져오거나 설정하는 메소드
height()
- 세로 크기를 가져오거나 설정하는 메소드
innerWidth()
- 요소의 가로크기 + 패딩의 가로크기를 합한 크기를 가져오거나 설정하는 메소드
innerHeight()
- 요소의 세로크기 + 패딩의 세로크기를 합한 크기를 가져오거나 설정하는 메소드
outerWidth()
- 요소의 가로크기 + 패딩의 가로크기 + 테두리의 가로크기를 합한 크기를 가져오거나 설정하는 메소드
outerHeight()
- 요소의 세로크기 + 패딩의 세로크기 + 테두리의 세로크기를 합한 크기를 가져오거나 설정하는 메소드
outerWidth(true)
- 요소의 가로크기 + 패딩의 가로크기 + 테두리의 가로크기 + 마진의 가로크기를 합한 크기를 가져오거나 설정하는 메소드
outerHeight(true)
- 요소의 세로크기 + 패딩의 세로크기 + 테두리의 세로크기 + 마진의 세로크기를 합한 크기를 가져오거나 설정하는 메소드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스 모델 관련 메소드</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script>
$(function(){
$('button').on('click', function(){
const str = `div 요소의 크기는 ${$('#divBox').width()} X ${$('#divBox').height()} 이고, 패딩 영역을 포함한 크기는 ${$('#divBox').innerWidth()} X ${$('#divBox').innerHeight()} 이고, 테두리까지 포함한 크기는 ${$('#divBox').outerWidth()} X ${$('#divBox').outerHeight()} 이고, 마진 영역까지 포함한 크기는 ${$('#divBox').outerWidth(true)} X ${$('#divBox').outerHeight(true)} 입니다`;
$('#text').html(str);
});
});
</script>
<style>
#divBox{
width: 400px; height: 110px;
border: 5px solid red;
padding: 10px;
margin: 15px;
}
</style>
</head>
<body>
<h2>박스 모델 관련 메소드</h2>
<div id="divBox">
<p id="text"></p>
</div>
<button>요소의 크기 정보</button>
</body>
</html>
728x90
'JS > jQuery' 카테고리의 다른 글
| [jQuery] 클래스 (0) | 2022.05.09 |
|---|---|
| [jQuery] attribute & property (0) | 2022.05.09 |
| [jQuery] 요소의 탐색 (0) | 2022.05.09 |
| [jQuery] 요소 (0) | 2022.05.09 |
| [jQuery] jQuery로 DOM 다루기 (0) | 2022.05.09 |