jQuery Set & Get innerWidth & innerHeight Of Html Elements

jQuery Set & Get innerWidth & innerHeight Of Html Elements - Lara Tutorials

To set or get innerWidth and innerHeight of selected html elements using jQuery; In this jQuery tutorial set & get inner height and inner width of selected html elements, we will learn how to get or set dimensions of selected html element’s using jQuery method innerWidth() & innerHeight().

Set & Get Inner Heigth & Width

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 innerWidth() method

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

<!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>

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 innerHeight () method

This example will demostrate, you 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>   

Leave a Reply

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