jQuery 강좌 | Plugins > jQuery Actual - 보이지 않는 요소의 크기를 가져오는 플러그인

jQuery의 .width(), .height() 등으로 선택한 요소의 크기를 가져올 수 있습니다. 하지만

display: none;

등으로 요소를 보이지 않게 설정하였을 때는 값이 0으로 반환됩니다.

이를 해결해주는 플러그인이 jQuery Actual입니다. 이를 이용하면 숨겨진 요소의 크기를 가져올 수 있습니다.

https://github.com/dreamerslab/jquery.actual/

.hidden이 숨겨진 요소라고 할 때, 사용법은 다음과 같습니다.

// get hidden element actual width
$( '.hidden' ).actual( 'width' );
 
// get hidden element actual innerWidth
$( '.hidden' ).actual( 'innerWidth' );
 
// get hidden element actual outerWidth
$( '.hidden' ).actual( 'outerWidth' );
 
// get hidden element actual outerWidth and set the `includeMargin` argument
$( '.hidden' ).actual( 'outerWidth', { includeMargin : true });
 
// get hidden element actual height
$( '.hidden' ).actual( 'height' );
 
// get hidden element actual innerHeight
$( '.hidden' ).actual( 'innerHeight' );
 
// get hidden element actual outerHeight
$( '.hidden' ).actual( 'outerHeight' );
 
// get hidden element actual outerHeight and set the `includeMargin` argument
$( '.hidden' ).actual( 'outerHeight', { includeMargin : true });
 
// if the page jumps or blinks, pass a attribute '{ absolute : true }'
// be very careful, you might get a wrong result depends on how you makrup your html and css
$( '.hidden' ).actual( 'height', { absolute : true });
 
// if you use css3pie with a float element
// for example a rounded corner navigation menu you can also try to pass a attribute '{ clone : true }'
// please see demo/css3pie in action
$( '.hidden' ).actual( 'width', { clone : true });
Category

Created on 2014-06-26 07:46 | Updated on 2015-07-17 00:49

이 글을 공유하기

Kakao