Open In App

How to get inner width (excluding the border) of an element using jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

We can get the inner width of any element using the jQuery innerWidth() method. The innerWidth() method returns the inner width of the first matched element including padding but not border.

Syntax:

$(selector).innerWidth()

So the inner width of an element is shown in the below image.

Inner width

The inner width of an element is the sum of the width of an element and padding around that element. We do not include Border and Margin while calculating the inner width of any element.

Example: The following example demonstrates the inner width of the “p” element of HTML by using the button click event.

HTML




<!DOCTYPE html>
<html>
  <head>
    <!-- jQuery library -->
    <script src=
            type="text/javascript">
    </script>
  </head>
 
  <body>
     
<p>Hello</p>
 
 
    <button>Click to know the inner width of p tag</button>
    <script>
      $("button").click(function () {
        $("p").text("Inner Width : " + $("p").innerWidth());
      });
    </script>
  </body>
</html>


Output:

on click get inner width


Last Updated : 13 Jul, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads