jquery
  1. jquery-innerheight
PreviousNext

JQuery innerHeight()

Syntax

The .innerHeight() method in JQuery returns the inner height of the selected element, including padding but not including border and margin.

The syntax for using this method is:

$(selector).innerHeight();

Use

The .innerHeight() method can be used to retrieve the height of an element excluding its border or margin, but including its padding. This can be useful for dynamically adjusting the layout of a web page in response to user interactions or changes in device orientation.

Example

Here is an example that demonstrates how to use the .innerHeight() method in JQuery to get the height of an element:

<!DOCTYPE html>
<html>
<head>
    <title>JQuery innerHeight() Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .container {
            height: 200px;
            padding: 20px;
            border: 2px solid black;
        }
    </style>
</head>
<body>

    <div class="container">
        <p>This is some sample text.</p>
        <p>This is some more sample text.</p>
    </div>

    <script>
        var height = $('.container').innerHeight();
        console.log(height);
    </script>

</body>
</html>
Try Playground

In this example, we define a container with a height of 200 pixels, padding of 20 pixels, and a 2-pixel black border. We then use the .innerHeight() method to retrieve the height of the container, including padding but excluding border or margin. We log the result to the console using JavaScript.

Summary

The .innerHeight() method in JQuery can be useful for retrieving the height of an element excluding its border or margin, but including its padding. This can be helpful for dynamic web page layouts that need to respond to changes in user interaction or device orientation.

innerWidth()outerWidth()
Published on: