1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <style type="text/css"> #box { width: 100px; height: 100px; padding: 50px; border: 50px solid blue; margin: 100px auto; } </style> </head> <body> <div id="box"></div> <script src="jquery.js"></script> <script> // width : 기본 // innerWidth : width + padding // outerWidth : width + padding + border // outerWidth(ture) : width + padding + border + margin var box = $("#box"); var width = box.width(); var height = box.height(); console.log("width : " + width ); // width : 100 console.log("height : " + height ); // height : 100 var innerWidth = box.innerWidth(); var innerHeight = box.innerHeight(); console.log("innerWidth : " + innerWidth); // innerWidth : 200 //width + padding console.log("innerHeight : " + innerHeight); // innerHeight : 200 var outerWidth = box.outerWidth(); var outerHeight = box.outerHeight(); var outerHeight2 = box.outerHeight(true); // true는 margin을 포함한 영역의 크기를 얻는다. console.log("outerWidth : " + outerWidth); // outerWidth 300 console.log("outerHeight : " + outerHeight); // outerHeight 300 // height + border + padding console.log("outerHeight2 : " + outerHeight2); // outerHeight2 500 // height + border + padding + margin </script> </body> </html> |
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] offsetParent() - CSS position의 기준이 되는 부모요소 (0) | 2015.02.11 |
|---|---|
| [jQuery] $.merge() 두개의 배열 합치기 (0) | 2015.02.11 |
| [jQuery] $.fn.메서드 만들기 (플러그인) (0) | 2015.02.10 |
| [jQuery] $.grep - 확장집합 특정 요소 제거(필터) (0) | 2015.02.10 |
| [jQuery] :contains - 특정 텍스트를 포함한 요소찾기, index찾기 (0) | 2015.02.09 |
