How to get inner width (excluding the border) of an element using jQuery ?
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
Please Login to comment...