[jQuery] 검색된 요소 크기 구하기. [ .width(), .height(), .outerWidth(), .outerHeight() ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 검색된 요소의 크기 구하기</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#my {
background-color:Yellow;
border:2px solid gray;
position:absolute;
padding:10px z-index:0;
margin:10px;
top:50px;
left:50px;
width:150px; height:200px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnSize").mouseover(function(){
// outerHeight() : 마진을 제외한 영역의 크기
var msg="outerHeight : " + $("#my").outerHeight() +"<br />";
// outerHeight(true) : 마진을 포함한 영역의 크기
msg += " outerHeight(true) : " + $("#my").outerHeight(true) +"<br />";
msg += "outerWidth : " + $("#my").outerWidth() +"<br />";
msg += "outerWidth(true) : " + $("#my").outerWidth(true)+"<br />";
msg += "width() : " + $("#my").width() +"<br />";
msg += "height() : " + $("#my").height()+"<br />";
$("#result").html(msg);
});
});
</script>
</head>
<body>
<div id="my">
<p>jQuery</p>
<p>Ajax</p>
</div>
<input type="button" value="위 영역의 크기 구하기" id="btnSize" />
<fieldset style="margin-top:300px">
<legend>Result</legend>
<div id="result">
</div>
</fieldset>
</body>
</html>[출처] [jQuery] 검색된 요소 크기 구하기. [ .width(), .height(), .outerWidth(), .outerHeight() ]|작성자 자바킹