[jQuery] 영역의 크기 구하기

동적인 UI 구성하기 위하여, 엘리먼트 영역의 크기를 구하는 과정이 반드시 필요하다. Javascript 에서는 clientHeight, offsetHeight 등을 사용하였지만 jQuery에서는 또 다르다.

$("element").outerHeight();

위와 같이 작성하면 엘리먼트 영역의 높이를 구할 수 있다. 넓이 또한 마찬가지로 outerWidth()를 이용하면 된다. 혹시나 margin을 포함한 영역의 크기를 구하고 싶다면, 간단한 작업으로 가능하다.

$("element").outerHeight(true);

outerHeight()의 괄호 안에 true라는 값을 주면 margin을 포함한 영역의 크기를 구할 수 있게 된다. 참고적으로 outerHeight()를 쓰지 않고 그냥 height()를 사용해도 영역의 크기를 리턴 받을 수 있다.

$("element").height();