jQuery innerWidth() with Example

jQueryWeb DevelopmentFront 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>

Output

This will produce the following output −

Click the button to get inner width −

raja
Updated on 30-Dec-2019 09:57:24

Advertisements