jQuery innerWidth() with Example


The innerWidth() method in jQuery is used to return the inner width of an element. The method includes padding, but the border and margin aren’t included.

Syntax

The syntax is as follows −

$(selector).innerWidth()

Example

Let us now see an example to implement the jQuery innerWidth() method −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $("button").click(function(){
         document.getElementById("demo").innerHTML = "<br>Inner Width of DIV = " + $("div").innerWidth()
      });
   });
</script>
</head>
<body>
<h2>Demo Box</h2>
<div style="height:150px;width:450px;padding:10px;margin:2px;background-color:green;"></div><br>
<button>Inner Width of div</button>
<p id="demo"></p>
</body>
</html>

Output

This will produce the following output −

Click the button to get inner width −

Updated on: 30-Dec-2019

78 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements