jQuery Set & Get innerWidth & innerHeight Of Html Elements

jQuery Set & Get innerWidth & innerHeight Of Html Elements

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>

Output

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.

In the above jQuery InnerWidth() method example, First of all When you click on button that get selected html elements innerWidth and after that we have set innerWidth of the selected html elements and showing the current innerWidth of the box body.

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>                            

Output

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.

In the above jQuery innerHeight () method example, First of all When you click on button that get selected html elements innerHeight and after that we have set innerHeight of the selected html elements and showing the current innerHeight of the box body.

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

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