IMG-LOGO
Home Course Dimensions of JQuery

Dimensions of JQuery

by MH RISHAD - 01 Jan 1970
IMG

JQuery easy to work with the ``dimensions`` of elements and browser.

Dimension Methods

jQuery has some important methods working with dimensions:

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()

width() and height() Methods

width() method sets/returns the width of an element (excludes padding, border and margin).

height() method sets/returns the height of an element (excludes padding, border and margin).

Example: returns the width and height of a selected or specified <div> element:

 

Example 1.

$("button").click(function(){
  var txt = "";
  txt += "Width: " + $("#div1").width() + "</br>";
  txt += "Height: " + $("#div1").height();
  $("#div1").html(txt);
});

 

innerWidth() and innerHeight() Methods

innerWidth() method returns the width of an element (includes padding).

innerHeight() method returns the height of an element (includes padding).

Example returns the inner-width/height of a specified <div> element:

 

Example 2

$("button").click(function(){
  var txt = "";
  txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
  txt += "Inner height: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

outerWidth() and outerHeight() Methods

outerWidth() method returns the width of an element (includes padding and border).

outerHeight() method returns the height of an element (includes padding and border).

Example returns the outer-width/height of a specified <div> element:

 

Example 3

$("button").click(function(){
  var txt = "";
  txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
  txt += "Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

outerWidth(true) method returns the width of an element (includes padding, border, and margin).

outerHeight(true) method returns the height of an element (includes padding, border, and margin).

 

Example 4

$("button").click(function(){
  var txt = "";
  txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
  txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
});

More width() and height()

Example returns the width and height of the document (the HTML document) and window (the browser viewport):

Example 5

$("button").click(function(){
  var txt = "";
  txt += "Document width/height: " + $(document).width();
  txt += "x" + $(document).height() + "\n";
  txt += "Window width/height: " + $(window).width();
  txt += "x" + $(window).height();
  alert(txt);
});

Example sets the width and height of a specified <div> element:

 

Example 6

$("button").click(function(){
  $("#div1").width(500).height(500);
});
Tags:
Share:

Leave a Comment

Required fields are marked *