[jQuery] height / innerHeight / outerHeight - CSS


$('#btn0').click(function(){

  $('#input0').val( $(document).height() );

  $('#input1').val( $(document).innerHeight() );

  $('#input2').val( $(document).outerHeight() );

});

documentの高さを取得する

document height : px

document innerHeight : px

document outerHeight : px


$('#btn1').click(function(){

  $('#input3').val( $(window).height() );

  $('#input4').val( $(window).innerHeight() );

  $('#input5').val( $(window).outerHeight() );

});

windowの高さを取得する

window height : px

window innerHeight : px

window outerHeight : px


<style>

#rect0{

  margin:10px;

  padding:8px;

  border:5px solid #1d5666;

  width:100px;

  height:100px;

  display:block;

  background-color:#28a9cc;

}

</style>



$('#btn2').click(function(){

  $('#input6').val( $('#rect0').height() );

  $('#input7').val( $('#rect0').innerHeight() );

  $('#input8').val( $('#rect0').outerHeight() );

});

id = rect0

divの高さを取得する

div height : px

div innerHeight : px

div outerHeight : px