Skip to content
Related Articles

Related Articles

Improve Article

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

  • Last Updated : 19 Aug, 2021
Geek Week

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 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

My Personal Notes arrow_drop_up
Recommended Articles
Page :