How to get inner width (excluding the border) of an element using jQuery ?
Last Updated :
13 Jul, 2022
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 >
< 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
Share your thoughts in the comments
Please Login to comment...