jQuery Set & Get width and height Of Html Elements

jQuery set and get width and height of HTML elements; In this tutorial, you will learn how to dynamically set/change or get the width and height of selected html elements like div, span, p, button, tag etc.

How to dynamically set and get the height and width of HTML element

Use jQuery width() and height() method to change/set and get html elements ( div, span, p, button, tag ) width and height.

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

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>                            

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 width() method example, First of all When you click on button that get selected html elements width and after that we have set width of the selected html elements and showing the current width of the box body.

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

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>                            

Output

jQuery Get & Set Height 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 height() method example, First of all When you click on button that get selected html elements height and after that we have set height of the selected html elements and showing the current height of the box body.

Recommended jQuery Tutorial

  1. How to Get & Set Data Attribute Value From Elements jQuery
  2. jQuery Remove Attribute and Disabled Attribute From Element
  3. jQuery | Event MouseUp By Example
  4. Event jQuery Mouseleave By Example
  5. jQuery Event Mouseenter Example
  6. Event jQuery MouseOver & MouseOut By Example
  7. keyup jquery event example
  8. Jquery Click Event Method with E.g.
  9. Event jQuery. Blur By Example
  10. jQuery form submit event with example
  11. keydown function jQuery
  12. List of jQuery Events Handling Methods with examples
  13. Jquery Selector by .class | name | #id | Elements
  14. How to Get the Current Page URL in jQuery
  15. jQuery Ajax Get() Method Example
  16. get radio button checked value jquery by id, name, class
  17. jQuery Set & Get innerWidth & innerHeight Of Html Elements
  18. jQuery Get Data Text, Id, Attribute Value By Example
  19. Set data attribute value jquery
  20. select multiple class in jquery
  21. How to Remove Attribute Of Html Elements In jQuery
  22. How to Checked Unchecked Checkbox Using jQuery
  23. jQuery removeClass & addClass On Button Click By E.g.
  24. To Remove whitespace From String using jQuery
  25. jQuery Ajax Post Method Example
  26. jQuery Ajax Get Method Example
  27. To Load/Render html Page in div Using jQuery Ajax $.load
  28. jQuery Sibling Methods – To Find Siblings Elements
  29. jQuery Find Siblings Elements with Class, id

AuthorDevendra Dode

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including 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. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

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