jQuery Set and Get width and height Of Element

jQuery Set and Get Height and Width Element; Through this tutorial, i am going to show you how to set or get width and height of selected html elements using jQuery method width() & height().

How to Set and Get element height and width in jQuery

There are two methods to set and Get element height and width in jQuery:

jQuery Width() method
jQuery Height() method

jQuery Width() method

jQuery offers various method to manipulating html elements. The jQuery width() methods get or set the width of the selected html elements.

Syntax width() Method

$("selector").width();

Using the above syntax Get width of elements

$("selector").width(value);

You can use this jquery width() syntax for Set the width of elements.

Example for jQuery Set & Get width Element

This example will demostrate, you how to set or get the width of selected HTML elements using the jQuery width () method.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get & Set Width of an Element</title>
<style type="text/css">
    #div_box_body{
        width: 350px;
        height: 250px;
        padding: 28px;
        text-align: justify;
        border: 12px solid #23384E;
        background: #28BAA2;
        margin: 16px;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
    $("#btn_width").click(function(){
        var GetWidth = $("#div_box_body").width();
        $("#output").html("Before Set Width: " + GetWidth);
        var SetWidth = $("#div_box_body").width(500);
        $("#set_width").html("After Set - Width: " + 500);
    });
});
</script>
</head>
<body>
    <div id="div_box_body" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla non purus nisld Dapibus nec turpis vel, semper malesuada ant.</div>
    <button type="button" id="btn_width">Get & Set Width</button>
    <p id="output"></p>
    <p id="set_width"></p>
</body>
</html>

Demo for jQuery Set & Get width Element

jQuery Get & Set Width of an Element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.

jQuery Height() method

jQuery offers various method to manipulating html elements. The jQuery height() methods get or set the height of the selected html elements.

Syntax height() Method

$("selector").height();

Using the above syntax Get heigthof elements

$("selector").height(value);

You can use this jquery height() syntax for Set the height of elements.

Example for jQuery Set & Get Heigh Element

This example will demostrate, you how to set or get the height of selected HTML elements using the jQuery height() method.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get & Set Height of an Element</title>
<style type="text/css">
    #div_box_height{
        width: 350px;
        height: 250px;
        padding: 28px;
        text-align: justify;
        border: 12px solid #23384E;
        background: #28BAA2;
        margin: 16px;
    }        
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<script type="text/javascript">
$(document).ready(function(){
    $("#btn_height").click(function(){
        var heightWidth = $("#div_box_height").height();
        $("#output_height").html("Before Set Height: " + heightWidth);
        $("#div_box_height").height(300); // set the height of box
        $("#set_height").html("After Set - Height: " + 300);
    });
});
</script>
</head>
<body>
    <div id="div_box_height" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla non purus nisld Dapibus nec turpis vel, semper malesuada ant.</div>
    <button type="button" id="btn_height">Get & Set Height</button>
    <p id="output_height"></p>
    <p id="set_height"></p>
</body>
</html>

Demo for jQuery Set & Get Heigh Element

jQuery Get & Set Height of an Element