jquery_dimensions

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

$(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

$(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

$(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

$(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

$(document).ready(function(){

$("button").click(function(){

$("#box").width(400).height(250);

});

</script>

Try it yourself

❮ Previous

Next ❯

Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.