본문 바로가기

Local Oriented/jQuery

jQuery, 영역 범위 좌표 width height


*. http://uix.kr/archives/649
- .height(), .width() : margin, border, padding 제외한 수치. 순수 element 영역
    IE 에서 만약 element 가 꽉채워지지 않았다면 .height() 값은 세팅된 수치와 다를 수 있다. .width() 는 IE 에서도 세팅된 수치와 동일
    Chrome 에선 .width() 나 .height() 모두 elelment 과 꽉채워지건 아니건 세팅된 수치와 동일
- .innerHeight(), .innerWidth() : margin, border 제외한 수치. element 와 padding 포함 영역.
   .height() 에 padding-top + padding-bottom 를 더한 값과
   .width() 에 padding-left + padding-right 를 더한 값과 
    IE 에서 만약 element 가 꽉채워지지 않았다면 .height() 값은 세팅된 수치와 다를 수 있다. .width() 는 IE 에서도 세팅된 수치와 동일
- .outerHeight(), .outerWidth() : margin 제외한 수치. element, padding, border 포함 영역
   .innerHeight() 에 border-top 의 두께 + border-bottom 의 두께를 더한 값.
   .innerWidth() 에 border-left 의 두께 + border-right 의 두께를 더한 값.
    IE 에서 만약 element 가 꽉채워지지 않았다면 .height() 값은 세팅된 수치와 다를 수 있다. .width() 는 IE 에서도 세팅된 수치와 동일
- .outerHeight(true), .outerWidth(true) : element, padding, border, margin 포함 영역
   .outerHeight() 에 margin-top + margin-bottom 을 더한 값.
   .outerWidth() 에 margin-left + margin-right 을 더한 값.
    IE 에서 만약 element 가 꽉채워지지 않았다면 .height() 값은 세팅된 수치와 다를 수 있다. .width() 는 IE 에서도 세팅된 수치와 동일
    Chrome 에선 .outerHeight(true) 값 없음.
- .offset().top, .offset().left : 절대좌표 (body 기준 상대좌표)
- .position().top, .position().left : 부모 element 기준 상대좌표
- .scrollLeft(), .scrollTop() : element 의 스크롤 좌표


*. screen 개체
screen.availWidth, screen.availHeight
재미있는 것은.. availWidth 와 availHeight 값이, iOS 에선 가로로 기울여도 변하지 않지만, 안드로이드는 변한다는 것..
iPod 4Gen 단말기를 세로로 놓고 보면 320*460 이 나오는데 가로로 뉘어 보아도 320*460인 반면,
갤럭시S 는 세로로 봤을때 320*352, 가로에서는 533*239 라는 것.

*.