jQuery 엘리먼트 크기 / 위치

<div id="box">

<span>박스의 width = </span><span id="width">0</span><br>

<span>박스의 height = </span><span id="height">0</span><br>

<span>박스의 innerWidth = </span><span  id="innerWidth">0</span><br>

<span>박스의 innerHeight = </span><span id="innerHeight">0</span><br>

<span>박스의 outerWidth = </span><span id="outerWidth">0</span><br>

<span>박스의 outerHeight = </span><span id="outerHeight">0</span><br>

</div>

$(document).ready(function(){

var box = $('#box');

$(window).resize(function(){

$('#width').text(box.width());

$('#height').text(box. height());

$('#innerWidth').text(box. innerWidth());

$('#innerHeight').text(box. innerHeight());

$('#outerWidth').text(box. outerWidth(false));

$('#outerHeight').text(box. outerHeight());

});

$(window).trigger('resize');

});

body > span { color:red; font-size: 29px; }

li { margin:5px; list-style: none; border: 1px solid green; }

#wrapper { border: 5px solid blue; padding:30px; margin:20px; font-size:20px;}

html * { margin:0; padding:0; }

body > span { color:red; font-size: 29px; }

li { margin:5px; list-style: none; border: 1px solid green; }

#wrapper { border: 5px solid blue; padding:30px; margin:20px; font-size:20px;}

< 엘리먼트의 위치를 부모 엘리먼트로부터 얻는 것 >

position : left와 top프로퍼티를 통해서 x축과 y축의 좌표를 전달합니다.

< 엘리먼트의 위치를 document로 부터 얻는 것 >

offset : left와 top 프로퍼티를 통해서 x축과 y축의 좌표를 전달합니다.