jQuery Set & Get innerWidth & innerHeight Of Html Elements

jQuery set and get inner height and width of element; Through this tutorial, i am going to show you how to set or get innerWidth and innerHeight of selected html elements like div, span tag, button tag, input box, etc, using jQuery method innerWidth() & innerHeight().

jQuery Set & Get innerWidth & innerHeight Of Html Elements

There are two methods available in jQuery, which is used to set and get inner height and width of html elements; as shown below:

  • jQuery innerWidth() method
  • jQuery innerHeight() method

jQuery innerWidth() method

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

Syntax innerWidth() Method

$("selector").innerWidth();

Using the above syntax Get innerWidth of elements

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

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

Example for jquery set and get inner width of element

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

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Get & Set Inner Width of an Element</title>
<style type="text/css">
    #div_box_body{
        width: 175px;
        height: 150px;
        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").innerWidth();
        $("#output").html("Before Set Width: " + GetWidth);
        var SetWidth = $("#div_box_body").innerWidth(200);
        $("#set_width").html("After Set - Width: " + 200);
    });
});
</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 Inner Width</button>
    <p id="output"></p>
    <p id="set_width"></p>
</body>
</html>

Demo for jquery set and get inner width of 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 innerHeight() method

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

Syntax innerHeight () Method

$("selector").innerHeight();

Using the above syntax Get innerHeight of elements

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

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

Example for jquery set and get inner height of element

See the following example for how to set or get the innerHeight of selected HTML elements using the jQuery innerHeight () method.

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

Demo for jquery set and get inner height of element

jQuery Get & Set Inner 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.