©TCP-tryWWW

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>jQuery Element Dimension</title>
	<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	<style>
		#divBox { 
			width: 400px;
			height: 110px;
			border: 5px solid orange;
			padding: 10px;
			margin: 15px;
		}
	</style>
	<script>
		$(function() {
			$("button").on("click", function() {
				var str = "이 div 요소의 ";
				// id가 "divBox"인 요소의 크기를 반환함.
				str += "크기는 " + $("#divBox").width() + "X"
					+ $("#divBox").height() + "이고,<br>";
				// id가 "divBox"인 요소의 패딩 영역을 포함한 크기를 반환함.
				str += "패딩 영역을 포함한 크기는 " + $("#divBox").innerWidth() + "X"
					+ $("#divBox").innerHeight() + "이고,<br>";
				// id가 "divBox"인 요소의 패딩 영역과 테두리를 포함한 크기를 반환함.
				str += "테두리까지 포함한 크기는 " + $("#divBox").outerWidth() + "X"
					+ $("#divBox").outerHeight() + "이고,<br>";
				// id가 "divBox"인 요소의 패딩 영역과 테두리, 마진 영역까지 포함한 크기를 반환함.
				str += "마진 영역까지 포함한 크기는 " + $("#divBox").outerWidth(true) + "X"
					+ $("#divBox").outerHeight(true) + "입니다.";
				$("#text").html(str);
			});
		});
	</script>
</head>

<body>

	<h1>다양한 크기 정보를 반환하는 메소드</h1>
	<div id="divBox">
		<p id="text"></p>
	</div>
	<button>요소의 크기 정보</button>
	
</body>

</html>