마진(margin) : 사각형을 그리는데 사각형 모양을 포함하고 있는 테두리, 영역등 포함
| 02.OuterWidthAndHeight.htm |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>검색된 요소의 크기 구하기</title>
<style type="text/css">
#my
{
background-color
: Yellow; border:2px solid gray;
position:absolute;
padding:10px; z-index:0px; margin:10px;
top:50px; left:50px;
width:200px; height:200px;
}
</style><!--절대좌표 지정-->
<script src="../jQuery/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#btnSize').click(function() { //outerHeight()
: 마진을 제외한 영역의 크기 alert("outerHeight : " + $('#my').outerHeight()); //outrHeight(true)
: 마진을 포함한 영역의 크기 alert("outerHeight(true) : " + $('#my').outerHeight(true)); //outerWidth()
: 마진을 제외한 영역의 크기 alert("outerWidth : " + $('#my').outerWidth()); //outerWidth(true)
: 마진을 포함한 영역의 크기 alert("outerWidth(ture) : " + $('#my').outerWidth(true)); });
}); </script> </head> <body>
<div id="my"> <p>jQuery</p> <p>Ajax</p>
</div>
<input type="button" id="btnSize" value="위 영역의 크기 구하기" />
</body> </html> |
| 결과화면 |
[그림45-1] |
02.OuterWidthAndHeight.htm'jQuery | javascript | CSS' 카테고리의 다른 글
| 47.jQuery - unbind 메서드로 이벤트 바인딩 해제 ( 07.Events ) (0) | 2009.11.12 |
|---|---|
| 46.jQuery - trigger 메서드로 click 행위 실행 ( 07.Events ) (0) | 2009.11.12 |
| 44.jQuery - Width와 Height값 크기 구하기 ( 06.CSS ) (0) | 2009.11.11 |
| -- 현재 까지의 jQuery 소스5 -- (0) | 2009.11.11 |
| 43.jQuery - Remove ( 05.Maripulation - 07.Remove ) (0) | 2009.11.11 |
Comments