jQuery Dimensions


In this tutorial, there are several methods available for jQuery Dimensions, and the methods are used to get and set the CSS dimensions for the specified elements.

jQuery width() and height() Methods

The jQuery width() method is used to get or set the width of the specified elements and the height() method used to get or set the height of the specified elements.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .box{
        width: 500px;
        height: 500px;
        border:1px solid #000;
    }        
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var width_data = $(".box").width();
       var height_data = $(".box").height();
       console.log(width_data +'x'+height_data); 
  });
});
</script>
</head>
<body>
  <div class="box"></div>
  <button>Click here</button>
</body>
</html>

jQuery innerWidth() and innerHeight() Methods

The jQuery innerWidth() method is used to get or set the inner width of the specified elements and the innerHeight() method used to get or set the inner height of the specified elements. The jQuery innerWidth() and innerHeight() methods include padding, but not border and margin.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .box{
        width: 500px;
        height: 500px;
        border:1px solid #000;
        padding:10px;
    }        
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var width_data = $(".box").innerWidth();
       var height_data = $(".box").innerHeight();
       console.log("Inner Width: " + width_data + ", " + "Inner Height: " + height_data); 
  });
});
</script>
</head>
<body>
  <div class="box"></div>
  <button>Click here</button>
</body>
</html>

jQuery outerWidth() and outerHeight() Methods

The jQuery outerWidth() method is used to get or set the outer width of the specified elements and the outerHeight() method is used to get or set the outer height of the specified elements. The jQuery outerWidth() and outerHeight() methods include padding and border, but not include margin.

Example

<!DOCTYPE html>
<html>
<head>
<style>
    .box{
        width: 500px;
        height: 500px;
        border:1px solid #000;
        padding:10px;
        margin:5px;
    }        
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    var width_data = $(".box").innerWidth();
       var height_data = $(".box").innerHeight();
       console.log("Outer Width: " + width_data + ", " + "Outer Height: " + height_data); 
  });
});
</script>
</head>
<body>
  <div class="box"></div>
  <button>Click here</button>
</body>
</html>