jQuery .height() gets or sets height of the target element;
jQuery .innerHeight() gets the computed height (including padding but not border) of the target element;
jQuery .outerHeight() gets the computed height (including padding and border) of the target element;
Also check jQuery .width()
<script>
$(function(){
var target_height = $('.target').height(); // get target height
$('.target2').height( target_height ); // set target height
$('.target2 .height2 span').text( target_height );
$('.height_log span').text( $('.target').height() );
$('.innerHeight_log span').text( $('.target').innerHeight() );
$('.outerHeight_log span').text( $('.target').outerHeight() );
$('.windowHeight_log span').text( $(window).height() ); // returns height of browser viewport
$('.documentHeight_log span').text( $(document).height() ); // returns height of HTML document
});
</script> |
<script>
$(function(){
var target_height = $('.target').height(); // get target height
$('.target2').height( target_height ); // set target height
$('.target2 .height2 span').text( target_height );
$('.height_log span').text( $('.target').height() );
$('.innerHeight_log span').text( $('.target').innerHeight() );
$('.outerHeight_log span').text( $('.target').outerHeight() );
$('.windowHeight_log span').text( $(window).height() ); // returns height of browser viewport
$('.documentHeight_log span').text( $(document).height() ); // returns height of HTML document
});
</script>
<div class="well target">
<span class="label label-warning">.target</span>
<p>set in css:
<span class="label label-info">height: 100px;</span>
<span class="label label-info">padding: 10px;</span>
<span class="label label-info">margin: 12px;</span>
<span class="label label-info">border: 2px;</span>
</p>
</div>
<div class="well">
<p>get .target properties with jQuery:
<span class="label label-success height_log">
.target height: <span></span>
</span>
<span class="label label-success innerHeight_log">
.target innerHeight: <span></span>
</span>
<span class="label label-success outerHeight_log">
.target outerHeight: <span></span>
</span>
</p>
<p>
<span class="label label-success windowHeight_log">
window height: <span></span>
</span>
<span class="label label-success documentHeight_log">
document height: <span></span>
</span>
</p>
</div>
<div class="target2">
<span class="label label-success height2">height:<span></span></span>
<span>height of this block set by jQuery (same as .target block)</span>
</div> |
<div class="well target">
<span class="label label-warning">.target</span>
<p>set in css:
<span class="label label-info">height: 100px;</span>
<span class="label label-info">padding: 10px;</span>
<span class="label label-info">margin: 12px;</span>
<span class="label label-info">border: 2px;</span>
</p>
</div>
<div class="well">
<p>get .target properties with jQuery:
<span class="label label-success height_log">
.target height: <span></span>
</span>
<span class="label label-success innerHeight_log">
.target innerHeight: <span></span>
</span>
<span class="label label-success outerHeight_log">
.target outerHeight: <span></span>
</span>
</p>
<p>
<span class="label label-success windowHeight_log">
window height: <span></span>
</span>
<span class="label label-success documentHeight_log">
document height: <span></span>
</span>
</p>
</div>
<div class="target2">
<span class="label label-success height2">height:<span></span></span>
<span>height of this block set by jQuery (same as .target block)</span>
</div>
.target {
height: 100px;
padding: 10px;
margin: 12px;
border: 2px solid #bbb;
}
.target2 {
background: #ccc;
margin: 10px 0;
} |
.target {
height: 100px;
padding: 10px;
margin: 12px;
border: 2px solid #bbb;
}
.target2 {
background: #ccc;
margin: 10px 0;
}