• 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 / JavaScript / Using JavaScript to Get the Width of an Element

Using JavaScript to Get the Width of an Element

March 5, 2022 Leave a Comment

We can use JavaScript to get the width of an element by using the offsetWidth property.

document.getElementById("div2").offsetWidth;

You can also get the width of an element using the width property, but one problem we see a lot is if no width is set for the element, nothing will be returned for the width. This is why we prefer to always use the offsetWidth property to get the width of an element. Also, note that the offsetWidth property will return the width of the element plus any padding and/or border-width that might be added to the element.


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 with padding, we would use the offsetWidth property;

document.getElementById("div1").offsetWidth;

Getting the width of an element can also be done using jQuery with the width() and outerWidth() methods.

Using JavaScript to Get and Change the Width of an Element

In the example below, we will create a div and the ability to add text 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 id="click-me1" onclick="addText()" class="click-me">Add text</div>
<div id="click-me2" onclick="getWidth()" class="click-me">Get Width</div>
<div id="results"></div>

We can utilize both an onclick event and the innerHTML property to add new text to #div2.

Then we can use the offsetWidth property to get the width value of #div2. Finally, we will use the textContent property to display the new width results.

Here is the code:

function addText(){
  var currHTML = document.getElementById("div2").innerHTML;
  currHTML += " This is some more text.";
  document.getElementById("div2").innerHTML = currHTML;
};
function getWidth(){
  var width1 = document.getElementById("div2").offsetWidth;
  document.getElementById("results").textContent = width1;
};

The final code and output for this example is below:

Code Output:

This is some text.

Add text
Get Width

Full Code:

<style>#div2 { display: inline-block; border: 1px solid #444; padding: 5px; }</style>
<div id="div2">This is some text.</div>
<div id="click-me1" onclick="addText()" class="click-me">Add text</div>
<div id="click-me2" onclick="getWidth()" class="click-me">Get Width</div>
<div id="results"></div>

<script>

function addText(){
  var currHTML = document.getElementById("div2").innerHTML;
  currHTML += " This is some more text.";
  document.getElementById("div2").innerHTML = currHTML;
};
function getWidth(){
  var width1 = document.getElementById("div2").offsetWidth;
  document.getElementById("results").textContent = width1;
};

</script>

Hopefully this article has helped you understand how to use JavaScript to get the width of an element.

Other Articles You'll Also Like:

  • 1.  Using JavaScript to Replace a Character at an Index
  • 2.  Check if Checkbox is Checked in JavaScript
  • 3.  How to Find the Longest String in an Array in JavaScript
  • 4.  Sum the Digits of a Number in JavaScript
  • 5.  Using JavaScript to Return String
  • 6.  setInterval JavaScript – How to Repeat Code in Set Time Intervals
  • 7.  Add Years to a Date Using JavaScript
  • 8.  Get the First Child Element and Change it with JavaScript
  • 9.  How to Check if a String Contains Vowels in JavaScript
  • 10.  Using JavaScript to Rotate an Image

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