WS WhereIsStuff
Tutorial Guides
Log In Sign Up

Advertisement

Google Ad Slot: content-top

jQuery Dimensions

Previous Next

In jQuery, dimensions refer to getting or setting an element's height, width, inner dimensions, and outer dimensions, with or without padding, border, and margin.


jQuery Dimension Methods

jQuery has several important methods for working with dimensions:

Method

Description

.width()

Get/set the content width (no padding, border, margin)

.height()

Get/set the content height

.innerWidth()

Includes padding

.innerHeight()

Includes padding

.outerWidth()

Includes padding + border

.outerHeight()

Includes padding + border

.outerWidth(true)

Includes padding + border + margin

.outerHeight(true)

Includes padding + border + margin

jQuery Dimensions


jQuery width() and height() Methods


  • .width() → Get or set the width of an element.
  • .height() → Get or set the height of an element

Both exclude padding, border, and margin.


The following example returns the width and height of a specified  element:

Example
<script>
$(document).ready(function(){
$("button").click(function(){
// Get dimensions
let w = $("#box").width();
let h = $("#box").height();
var txt = ""
txt += "Width of box: " + w +"<br>";
txt += "Height of box: " + h ;
$("#box").html(txt);
});
});
</script>
Try it yourself

jQuery innerWidth() and innerHeight() Methods


  • **.innerWidth()** → Returns the width + padding of an element.
  • **.innerHeight()** → Returns the height + padding of an element.


The following example returns the inner-width/height of a specified element:

Example
<script>
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "Width of box: " + $("#box").width() + "</br>";
txt += "Height of box: " + $("#box").height() + "</br>";
txt += "Inner width of box: " + $("#box").innerWidth() + "</br>";
txt += "Inner height of box: " + $("#box").innerHeight();
$("#box").html(txt);
});
});
</script>
Try it yourself

jQuery outerWidth() and outerHeight() Methods


  • **.outerWidth()** → Gets the width of an element including padding and border.
  • **.outerHeight()** → Gets the height of an element including padding and border.


The following example returns the outer-width/height of a specified element:

Example
<script>
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "Width of box: " + $("#box").width() + "</br>";
txt += "Height of box: " + $("#box").height() + "</br>";
txt += "Outer width of box: " + $("#box").outerWidth() + "</br>";
txt += "Outer height of box: " + $("#box").outerHeight();
$("#box").html(txt);
});
});
</script>
Try it yourself
  • **.outerWidth(true)** → Gets the width of an element including padding, border and margin also.
  • **.outerHeight(true)** → Gets the height of an element including padding, border and margin also.


Example
<script>
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "Width of box: " + $("#box").width() + "</br>";
txt += "Height of box: " + $("#box").height() + "</br>";
txt += "Outer width of box: " + $("#box").outerWidth(true) + "</br>";
txt += "Outer height of box: " + $("#box").outerHeight(true);
$("#box").html(txt);
});
});
</script>
Try it yourself

jQuery set width() and height() Methods


jQuery’s .width() and .height() methods to set the width and height of HTML elements easily.


The following example sets the width and height of a specified <div> element:

Example
<script>
$(document).ready(function(){
$("button").click(function(){
$("#box").width(400).height(250);
});
});
</script>
Try it yourself

Previous Next