<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DIV 크기 알아내기</title>
<style type="text/css">
#my {
background-color:Yellow;
border:2px solid gray;
position:absolute;
padding:10px;
z-index:0;
margin:10px;
top:50px;
}
</style>
<script src="http://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
// "기본" 을 변경하여 "대처" 형태로 바꿔서 사용 하면 충돌을 피할수 있다.
// 기본 ------------------------------------------------------------------
// $(document).ready(function () {
// $('#btnSize').mouseover(function () {
// //outerHeight() : 마진을 제외한 영역의 크기
// alert("outerHeight : " + $("#my").outerHeight());
// //outerHeight(true) : 마진을 포함한 영역의 크기
// alert("outerHeight(true) : " + $("#my").outerHeight(true));
// alert("outerWidth : " + $("#my").outerWidth());
// alert("outerWidth(true) : " + $("#my").outerWidth(true));
// });
// });
// 대처 ------------------------------------------------------------------
jQuery.noConflict();
// var $j = jQuery.noConflict(); => $j로 alias 사용 가능
// $로 사용된 jquery를 모두 jQuery로 대체한다
jQuery(document).ready(function () {
jQuery('#btnSize').mouseover(function () {
//outerHeight() : 마진을 제외한 영역의 크기
alert("outerHeight : " + jQuery("#my").outerHeight());
//outerHeight(true) : 마진을 포함한 영역의 크기
alert("outerHeight(true) : " + jQuery("#my").outerHeight(true));
alert("outerWidth : " + jQuery("#my").outerWidth());
alert("outerWidth(true) : " + jQuery("#my").outerWidth(true));
});
});
</script>
</head>
<body>
<div id="my">
<p>jQuery</p>
<p>Ajax</p>
<p>Ajax</p>
<p>Ajax</p>
<p>Ajax</p>
<p>Ajax</p>
<p>Ajax11111111111111111111111111111111111</p>
</div>
<input type="button" id="btnSize" value="아래 DIV 영역의 크기 구하기" />
</body>
</html>
