returns the inner-width/height of a specified <div> element - Javascript jQuery Method and Property

Javascript examples for jQuery Method and Property:width

  1. HOME
  2. Javascript
  3. jQuery Method and Property
  4. width

Introduction

The innerWidth() method returns the width of an element (includes padding).

The innerHeight() method returns the height of an element (includes padding).

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var txt = "";
        txt += "Width of div: " + $("#div1").width() + "</br>";
        txt += "Height of div: " + $("#div1").height() + "</br>";
        txt += "Inner width of div: " + $("#div1").innerWidth() + "</br>";
        txt += "Inner height of div: " + $("#div1").innerHeight();
        $("#div1").html(txt);
    });//from w  w w  .  j  a v  a 2s .  c  om
});
</script>
</head>
<style>
#div1 {
    height: 100px;
    width: 300px;
    padding: 10px;
    margin: 3px;
    border: 1px solid blue;
    background-color: red;
}
</style>
<body>

<div id="div1"></div>
<br>

<button>Display dimensions of div</button>

</body>
</html>

Related Tutorials