jQuery Tutorial

jQuery Examples

jQuery Practice

JQuery MCQs

Home » jQuery » jQuery DOM Manipulation Methods

jQuery innerWidth() Method

jQuery | innerWidth() Method: Learn about the jQuery innerWidth() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on October 16, 2022

innerWidth() Method

It is very important to know the dimensions of the element that has been placed on the web page. It includes – height, width, innerHeight, innerWidth, etc. For example, the container created, and the images used should have a proper dimension ratio in order to make the web page look more professional. That's why we need to have knowledge of the dimensions over here. So, over here, we'll discuss the innerWidth() method in detail.

The innerWidth() method helps to get the inner width of the selected element. The element whose dimensions have to be known is passed here as a selector, and this method gives the numerical value of the width. The innerWidth() method does not return the width including the border and margin. It includes the padding of the element but not the border and margin of the element. This method helps return the width of the first matched element.

innerWidth() Method Syntax

$('selector').innerWidth();

It does not accept any parameters. The difference between the width() & innerWidth() method is that, using width() we can also set the value for the element. But using innerWidth(), we get the width of the element including the padding. This way the innerWidth() method works in jQuery.

The below example shows the implementation of this method. When the button provided is clicked, it helps to return the width of the image.

jQuery innerWidth() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery - Inner Width</h2>
    <p>Click the button to get the Inner Width of the image.</p>
    <button>Inner Width</button>
    <hr>
    <img style="height: 200px;" id="myImg" src="https://media.istockphoto.com/photos/mountain-landscape-picture-id517188688?k=20&m=517188688&s=612x612&w=0&h=i38qBm2P-6V4vZVEaMy_TaTEaoCMkYhvLCysE7yJQ5Q=">
    <hr>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            var InWidth = $('img').innerWidth();
            $('h3').html('Inner Width of the Image is: ' + InWidth);
        })
    });
  </script>
</html>

Output:

jQuery height() Method

jQuery innerHeight() Method

Comments and Discussions!

Load comments ↻