Jquery Dimension

width() and height()

The width() and height() method returns width and height respectively excluding padding, border and margin.

$(document).ready(function(){
 $('button').click(function(){
  var txt = "";
  txt = txt + $('.box').width() + "
";
  txt = txt + $('.box').height();
  $('.box').html(txt);
 });
});


innerWidth() and innerHeight()

The innerWidth() and innerHeight() method returns width and height respectively excluding border and margin. i.e total width including padding.

$(document).ready(function(){
 $('button').click(function(){
  var txt = "";
  txt = txt + $('.box').innerWidth() + "
";
  txt = txt + $('.box').innerHeight();
  $('.box').html(txt);
 });
});


outerWidth() and outerHeight()

The outerWidth() and outerHeight() method returns width and height respectively excluding margin. i.e total width including padding and border.

$(document).ready(function(){
 $('button').click(function(){
  var txt = "";
  txt = txt + $('.box').outerWidth() + "
";
  txt = txt + $('.box').outerHeight();
  $('.box').html(txt);
 });
});


outerWidth(true) and outerHeight(true)

The outerWidth(true) and outerHeight(true) method returns width and height respectively including padding, border and margin.

$(document).ready(function(){
 $('button').click(function(){
  var txt = "";
  txt = txt + $('.box').outerWidth(true) + "
";
  txt = txt + $('.box').outerHeight(true);
  $('.box').html(txt);
 });
});

Share this

Related Posts