jQuery 공작소 : .outerHeight()
jQuery 공작소에 방문해 주셔서 감사드립니다. 쉬운 예제로 느껴보세요!!
outerHeight 메소드는 다른 CSS 값을 포함한 높이를 알아냅니다.
예제 1
다른 CSS 설정이 같이 적용되어 있을때의 높이 알아보기
보기
height : 200px 인 DIV 의 높이 알아보기
padding 위아래 20px, 테두리두께 위아래 각 5px
실제 DIV 의 높이는 250px 입니다.
padding 위아래 20px, 테두리두께 위아래 각 5px
실제 DIV 의 높이는 250px 입니다.
소스
<style type="text/css">
.css_test {
background : #efefef;
border : 5px solid gray;
height : 200px;
padding : 20px;
}
</style>
height : 200px 인 DIV 의 높이 알아보기<br>
padding 위아래 20px, 테두리두께 위아래 각 5px<br>
실제 DIV 의 높이는 250px 입니다.<br>
<div class="css_test">
<br><br><br>
<button type="button" onclick="alert($('.css_test').outerHeight())">outerHeight 보기</button>
</div>
.css_test {
background : #efefef;
border : 5px solid gray;
height : 200px;
padding : 20px;
}
</style>
height : 200px 인 DIV 의 높이 알아보기<br>
padding 위아래 20px, 테두리두께 위아래 각 5px<br>
실제 DIV 의 높이는 250px 입니다.<br>
<div class="css_test">
<br><br><br>
<button type="button" onclick="alert($('.css_test').outerHeight())">outerHeight 보기</button>
</div>
관련 CSS
jQuery
$( 셀렉터 ).outerHeight() - 셀렉터에 해당하는 요소의 바깥쪽 높이를 알아냅니다.
※ padding, margin, border 의 값을 포함합니다.
예제 2
outerHeight( true ) - margin 값도 포함한 높이
보기
margin 을 포함한 값 알아보기
소스
<style type="text/css">
.css_test {
background : #efefef;
border : 5px solid gray;
height : 200px;
margin : 20px;
padding : 20px;
}
</style>
margin 을 포함한 값 알아보기
<div class="css_test">
<br><br><br>
<button type="button" onclick="alert($('.css_test').outerHeight())">기본 보기</button>
<button type="button" onclick="alert($('.css_test').outerHeight( true ))">margin 포함 보기</button>
</div>
.css_test {
background : #efefef;
border : 5px solid gray;
height : 200px;
margin : 20px;
padding : 20px;
}
</style>
margin 을 포함한 값 알아보기
<div class="css_test">
<br><br><br>
<button type="button" onclick="alert($('.css_test').outerHeight())">기본 보기</button>
<button type="button" onclick="alert($('.css_test').outerHeight( true ))">margin 포함 보기</button>
</div>
관련 CSS
jQuery
- 사방으로 20px 씩 margin 이 적용된 DIV 입니다.
- 높이에 margin 을 포함하면 40px 가 추가됩니다.
.outerHeight( true ) - true 옵션을 사용하면 margin 까지 포함한 높이를 알아냅니다.
+ 관련 jQuery +
jQuery 홈페이지 .outerHeight() API 문서 : https://api.jquery.com/outerHeight/