jQuery Width/Height
How to Set and Return jQuery Width/Height

There are some jQuery Method for jQuery width and height

width() method is use to sets or returns the width of an HTML element excluding padding, border and margin.

height() method is use to sets or returns the height of an HTML element excluding padding, border and margin.

innerWidth() method is use to returns the width of an HTML element including padding.

innerHeight() method is use to returns the height of an HTML element including padding.

outerWidth() method is use to returns the width of an HTML element including padding and border.

outerHeight() method is use to returns the height of an HTML element including padding and border.

Example for Width/Height

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

                    var str = "";

                    str +=$(".mydiv").width()+"  "+$(".mydiv").height()+"n";

                                str +=$(".mydiv").innerWidth()+"  "+$(".mydiv").innerHeight()+"n";

        str +=$(".mydiv").outerWidth()+"  "+$(".mydiv").height()+"n";

                                alert(str);

    });

});

</script>

<style>

.mydiv {

    height:100px;

    width:300px;

                margin:10px;

                padding:20px;

                border: 5px solid black;

                background-color: blue;

 }

</style>

</head>

<body>

<div class="mydiv"></div>

<br>

To view Dimension(Width and Height) of the div

<br>

<button>Click Here</button>

</body>

</html>


Previous
Next