jQuery innerWidth() with Example

jQuery Web Development Front End Technology

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>