jQuery Get & Set Outer Height & Width Of Html Elements

jQuery set and get outer height and width of html elements; Through this tutorial, i am going to show you how to set or get outer Width and outer Height of html elements like div tag, span, button, textarea, input box etc using jQuery method outerWidth() & outerHeight().

jQuery Get & Set Outer Height & Width Of Html Elements

There are two jquery methods for set and get outer height and width of html elements; as shown below:

  • jQuery outerWidth() method
  • jQuery outerHeight() method

jQuery outerWidth() method

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

Syntax outerWidth() Method

$("selector").outerWidth();

Using the above syntax Get outerWidth of elements

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

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

Example for jquery set and get outer width element

See the following example for how to set or get the outerWidth of selected HTML elements using the jQuery outerWidth () method; as shown below:

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Get & Set Outer Width of an Element</title>
<style type="text/css">
    #div_box_body{
        width: 300px;
        height: 250px;
        padding: 28px;
        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").outerWidth();
        $("#output").html("Before Set Width: " + GetWidth);
        var SetWidth = $("#div_box_body").outerWidth(400);
        $("#set_width").html("After Set - Width: " + 400);
    });
});
</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, </div>
    <button type="button" id="btn_width">Get & Set Outer Width</button>
    <p id="output"></p>
    <p id="set_width"></p>
</body>
</html>

Demo for jquery set and get outer width element

jQuery Get & Set Outer Width of an Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,

jQuery outerHeight() method

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

Syntax outerHeight () Method

$("selector").outerHeight();

Using the above syntax Get outerHeight of elements

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

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

Example for jquery get and set outer height of element

See the following example for how to set or get the outerHeight of selected HTML elements using the jQuery outerHeight () method; as shown below:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get & Set Outer Height of an Element</title>
<style type="text/css">
    #div_box_height{
        width: 300px;
        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").outerHeight();
        $("#output_height").html("Before Set Outer Height: " + heightWidth);
        $("#div_box_height").outerHeight(400); // set the height of box
        $("#set_height").html("After Set Outer Height: " + 400);
    });
});
</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.</div>
    <button type="button" id="btn_height">Get & Set Outer Height</button>
    <p id="output_height"></p>
    <p id="set_height"></p>
</body>
</html>                            

Demo for jquery get and set outer height of element

jQuery Get & Set Outer Height of an Element
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui.

Recommended jQuery Tutorials

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *