jquery
  1. jquery-innerwidth
PreviousNext

jQuery innerWidth()

The jQuery innerWidth() method is used to get the inner width of the selected element. This includes the padding but excludes the border and margin of the element.

Syntax

The syntax for using jQuery innerWidth() method is as follows:

$(selector).innerWidth();

Use

The innerWidth() method is useful when you need to get the actual inner width of an element for calculating the correct size or position of an element within its parent element.

Example

Here is an example of using jQuery innerWidth() method to get the inner width of an element:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery innerWidth() Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            var innerWidth = $("#box").innerWidth();
            $("#result").text("The inner width of the box is " + innerWidth + " pixels.");
        });
    </script>
    <style>
        #box {
            width: 200px;
            height: 100px;
            padding: 10px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <div id="result"></div>
</body>
</html>
Try Playground

In this example, we have created a div element with the id of "box". We have set the width of this element to 200 pixels, height to 100 pixels, padding to 10 pixels and border to 1 pixel solid black. We then use the jQuery innerWidth() method to get the inner width of "box" element and display it in the result div element.

Summary

The jQuery innerWidth() method is a useful tool for getting the inner width of an HTML element, including its padding but excluding its border and margin. This method can be helpful for calculating performance and position of content within the element.

height()innerHeight()
Published on: