Why are use the innerHeight and innerWidth method in JQ?

1 votes
52 views
Ethan Karla asked 28-Jul-2021 in Web Application by Ethan Karla

Why are use the innerHeight and innerWidth method in JQ?    

1 Answer

1 votes
Ravi Vishwakarma answered 02-Aug-2021 by Ravi Vishwakarma

jQuery innerWidth() is used to get the exact width of the selected elements. The inner width is the combination of the element's width and padding. Margins and limits are not included. And the same goes for innerHeight() . This is also counted except margin and border.

Syntax:

$(selector).innerWidth()
return the width + left padding + right padding 
$(selector).innerHeight() 
return height +top padding + bottom padding

Example:

<!DOCTYPE html>

<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8' />
    <title></title>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <script type='text/javascript'>
        $(document).ready(function () {
            $('div').click(function () {
                $(this).text('inner Width : ' + $(this).innerWidth() + 'px inner heigth : ' + $(this).innerHeight()+' px');
            });
        });
    </script>
    <style>
        body {
            margin: 10px;
            padding: 10px;
        }
        div {
            background-color: cyan;
            color: white;
            text-align: center;
            font-size:20px;
        }
        #div1 {
            margin:10px;
            padding:10px;
            width:100px;
            height:120px;
            background-color: blue;
        }
        #div2 {
            margin:10px;
            padding:15px;
            background-color: black;
            width:150px;
            height:150px;
        }
        #div3 {
            margin:10px;
            padding:30px;
            background-color: red;
            width:250px;
            height:200px;
        }
    </style>
</head>
<body>
    <button id='get'>Click on boxes then get inner width and height </button>&nbsp
    <button id='set'>Set width 100%</button>
    <br />
    <br />
    <div id='div1'>width : 100 and Heigth : 120</div>
    <div id='div2'>width : 150 and Heigth : 150</div>
    <div id='div3'>width : 250 and Heigth : 200</div>
</body>
</html>

Output:

Why are use the innerHeight and innerWidth method in JQ?