jQuery width() – Using jQuery to Get the Width of a Div

To get the width of a div using jQuery we can use two methods, the jQuery width() method or the outerWidth() method.

$("#div1").width();

$("#div2").outerWidth();

The main difference between the width() and outerWidth() methods is that the outerWidth() method will return the same thing as the width method, plus any padding and/or border-width that might be added to the element.

We find it most useful to know the width of an element including its padding and border, so in general, we prefer to use the outerWidth method.

Let’s say we have the following HTML:

<style>#div1 { padding: 10px; margin: 10px; }</style>
<div id="div1">
  <p>This paragraph is in a div that we want to get the width of.</p>
</div>

If we want to get the width of #div1, we will use the jQuery width() method in the following JavaScript code.

$("#div1").width();

Since the div has padding in it, if we want to get the width of #div1 with padding, we would use the outerWidth() method;

$("#div1").outerWidth();

Finally, since the #div1 element also has a margin of 10px on all sides, if we want to get the width of #div1 including padding and margin, we would use the outerWidth method and pass the boolean value true in the method.

$("#div1").outerWidth(true);

If you are using WordPress, don’t forget to change the $ to jQuery as below:

jQuery("#div1").outerWidth(true);

Getting the width of an element can also be done using pure JavaScript with the offsetWidth property.

Using jQuery to Get and Change the Width of a Div

In the example below, we will create a div and the ability to add as much text as we want to the div. Each time we add new text to the div, it will increase the width of the div. We will then let the user check the width of the div whenever they want. Here is the initial HTML setup:

<style>#div2 { display: inline-block; border: 1px solid #444; padding: 5px; }</style>
<div id="div2">This is some text.</div>
<div>
  <span>Click the button "Add text" below to add text and increase the width of the div.</span>
  <span>Click the "Get Width" button below to get the width value of #div2.</span>
  <span>Click the "Get Outer Width" button below to get the outerWidth value of #div2.</span>
</div>
<div id="click-me1" class="click-me">Add text</div>
<div id="click-me2" class="click-me">Get Width</div>
<div id="click-me3" class="click-me">Get Outer Width</div>
<div id="results"></div>

We can utilize both the jQuery click() method and jQuery text() method to add new text to #div2.

Then we can use the width() and outerWidth() methods to get the width and width+padding+border-width values of #div2. Finally, we will use the text() method again to display the new width results.

Here is the code:

$("#click-me1").click(function(){
  var currText = $("#div2").text();
  $("#div2").text(currText + " This is some more text.");
});
$("#click-me2").click(function(){
    var width1 = $("#div2").width();
    $("#results").text(width1);
});
$("#click-me3").click(function(){
    var width2 = $("#div2").outerWidth();
    $("#results").text(width2);
});

You will notice that the Outer Width will always return a width that is +12 on the width value. This is because there is padding of 5px on the top and bottom, and a border of 1px on the top and bottom of the div. Add those up and you get 12px.

The final code and output for this example is below:

Code Output:

Full Code:

<style>#div2 { display: inline-block; border: 1px solid #444; padding: 5px; }</style>
<div id="div2">This is some text.</div>
<div>
  <span>Click the button "Add text" below to add text and increase the width of the div.</span>
  <span>Click the "Get Width" button below to get the width value of #div2.</span>
  <span>Click the "Get Outer Width" button below to get the outerWidth value of #div2.</span>
</div>
<div id="click-me1" class="click-me">Add text</div>
<div id="click-me2" class="click-me">Get Width</div>
<div id="click-me3" class="click-me">Get Outer Width</div>
<div id="results"></div>

<script>

$("#click-me1").click(function(){
  var currText = $("#div2").text();
  $("#div2").text(currText + " This is some more text.");
});
$("#click-me2").click(function(){
    var width1 = $("#div2").width();
    $("#results").text(width1);
});
$("#click-me3").click(function(){
    var width2 = $("#div2").outerWidth();
    $("#results").text(width2);
});

</script>

Hopefully this article has helped you understand the jQuery width() method.