Introduction:

In this article we will learn how to get inner width of html elements or how to use innerWidth() method in jQuery with example.

Description:

jQuery innerWidth() method is used to return/get the inner width of the first matched

element without including border and margin.

This method includes padding but excludes border and margin.

This image explains that jQuery innerWidth () method includes padding but not border and margin.

Syntax:

$(selector).innerWidth()  

Example of jQuery innerWidth() method

Let's take an example to demonstrate the jQuery innerWidth() method.

!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>    <title>Jquery</title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script> <script type="text/javascript">
   $(document).ready(function () {
       $("button").click(function () {
          $("#divWidth").html("Inner width of div is: " + $("#Main").innerWidth());
       });
   });
</script>
</head>
<body>
    <div id="Main" style="height:100px;width:400px;padding:10px;margin:3px
       ;border:1px solid blue;background-color:lightpink;"></div><br> 
    <button>Click here to get the inner width of the div</button> 
   <div id="divWidth"></div>
</body>
</html>

Output:


Above code snippet when we click on button then it will show above div id=”main”

innerwidth in below div id=”divWidth”.


I hope it will help to you.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

Welcome to SQL Tutorials Point

Don't have an account? Click here to Create a new account, it takes less than a minute.