• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / jQuery / jQuery width() – Using jQuery to Get the Width of a Div

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

March 5, 2022 Leave a Comment

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:

This is some text.
Click the button “Add text” below to add text and increase the width of the div.
Click the “Get Width” button below to get the width value of #div2.
Click the “Get Outer Width” button below to get the outerWidth value of #div2.

Add text
Get Width
Get Outer Width

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.

Other Articles You'll Also Like:

  • 1.  jQuery delay – How to Delay the Start of a Method
  • 2.  jQuery blur – How to Use the blur() Method on an HTML Form
  • 3.  Using jQuery to Get the Parent Div of an Element
  • 4.  Using jQuery to Set the Id of a Div
  • 5.  Using jQuery to Scroll to Div
  • 6.  Using jQuery to Change Inner HTML
  • 7.  jQuery parent – Get the Parent Element of a Div
  • 8.  jQuery focus – Changing Form Styles with the focus() Method
  • 9.  jQuery fadeIn – Fading In Element in HTML
  • 10.  Using jQuery to Select Multiple Ids

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy