Understand and Master jQuery CSS Width and Height Functions

Understanding and correctly using sizing parameters is crucial. Not only it is an essential part of any design, but it may also affect functionality. For example, if we make a text box too small, the content might not fit in.

By using jQuery CSS width and height functions, you can quickly get or set the parameters on the DOM elements, both with and without styling properties. In this tutorial, we cover the syntax needed to make jQuery get CSS width and height values and set them as well.

jQuery CSS Width and Height: Main Tips

• jQuery has six methods used to return the height and width values of the elements inside the DOM.
• You can use two of them as jQuery CSS set height and width functions as well, but you should pay attention to different syntax rules.
• You can also choose whether these values will include padding, border, and margin.

Functions to Use

The jQuery library includes several functions for manipulating the height and width of elements. They include:

• .width() - set or return the jQuery CSS width of an element (excluding padding, border and margin).
• .height() - set or return the jQuery CSS height of an element (excluding padding, border and margin).
• .innerWidth() - return the jQuery CSS width of an element (including padding).
• .innerHeight() - return the jQuery CSS height of an element (including padding).
• .outerWidth() - return the jQuery CSS width of an element (including padding and border).
• .outerHeight() - return the jQuery CSS height of an element (including padding and border).

Look at the example below to see how to make jQuery get element width and height values:

$("button").click(() => {
  alert("Width of div:" + $("div").width());
  alert("Height of div:" + $("div").height());
});

Here we have an example of setting the dimensions via these two methods as well:

$("button").click(() => {
    $("div").height(200);
    $("div").width("50%");
});

The .width() and .height() methods use different syntax for setting and returning values of width and height properties.

Returning: $(selector).width | height()

Setting: $(selector).width | height(value)

The value in this example represents a number, which is converted to be the number of pixels the width or height should be set to. If the value is a string, an adequate unit of length must be provided as well:

• 100 would be valid, resulting in the element being set to 100 pixels width or height.
• "100" would not be a valid input because a unit of measurement is expected at the end of this value. To fix this, we must change it to "100px".

If the value is a string, other CSS values are viable as well. For example, you can enter values in percentages, or the auto keyword. For more information, see the CSS Units tutorial.

Inner/Outer: The Difference

The .innerHeight(), .innerWidth(), .outerHeight() and .outerWidth() methods are all used for getting the values of all properties contributing to the dimensions of the element together.

All of them follow this simple syntax pattern:

$(selector).innerHeight | innerWidth | outerHeight | outerWidth()

Inner dimensions normally include the width or height of the padding and the base element itself together. Here we have an example of getting and displaying the inner dimensions of an element:

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

Outer dimensions normally include the width or height of the padding, the border and the base element itself together. Here we have an example of getting and displaying the outer dimensions of an element:

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

.outerWidth() and .outerHeight() methods include the includeMargin parameter, which is a boolean that defaults to false. By changing it to true, you make the outer dimensions include the margin as well.

Here we have an example of getting and displaying the outer dimensions (including the margin) of an element:

$("button").click(() => {
  var txt = "";
  txt += "Outer width of div: " + $("#div1").outerWidth(true) + "";
  txt += "Outer height of div: " + $("#div1").outerHeight(true) + "";
  $("#div1").html(txt);
});

In the following example, you can see jQuery get element width and height of the document (the HTML document) and window (the browser viewport):

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

jQuery CSS Width and Height: Summary

• The height and width of DOM elements can be returned by using respective jQuery functions.
• Before you get width of element in jQuery, you can choose whether to include the padding, margins or borders.
• You can also make jQuery CSS set height or weight.