JavaScript Get DIV Height Dynamically
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Pragati
In this tutorial we will show you the solution of JavaScript get div height dynamically, here we needs to use jquery for collect height of div element even each time changes on height based on different users.
So we need to import external open source jquery library support then only we can see the changes on div element and also get those dynamic height at console panel.
Step By Step Guide On JavaScript Get DIV Height Dynamically :-
Here we defined div, input tag, two button elements. The div element helps us to show changes on div height, input tag for collects dynamic height size from different users, button ‘Set Height’ will loads function when user clicks on it and button ‘Get Height’ will displays the height of div element.
In script we retrieving user input by class ‘inpt’ and stored on variable ‘h’ then using height() method we sets input to div element by using id ‘cont’.
Then when user clicks on button ‘.gh’ then click event loads some code, there we collecting div element id ‘cont’ height by height() method and value stored on variable ‘ght’.
<!DOCTYPE html>
<html>
<head>
<title>GET DYNAMIC HEIGHT OF DIV</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<style>
#cont{
border: 5px solid rgb(130, 127, 127);
padding: 10px;
width: 30%;
}
</style>
<div id="cont">
We can set height for this box dynamically
</div>
<input type="text" class="inpt" placeholder="Enter Height for Div">
<button class="sg">Set Height</button>
<button class="gh">Get Height</button>
<script>
$(document).ready(function(){
$(".sg").click(function(){
var h=$(".inpt").val();
$("#cont").height(h);
});
$(".gh").click(function(){
var ght=$("#cont").height();
console.log(ght+"px");
});
});
</script>
</body>
</html>- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- For this program we used jquery code so needs to import open source jquery cdn link with the help of script tag.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In style tag we defined styles of ‘sets border width to 5px with solid style border, padding sets to 10px , width sets to 30%’ for id ‘cont’ of div element.
- Here we defined div element with text ‘We can set height for this box dynamically’, id ‘cont’ and input element defined with placeholder, class attributes ‘inpt’ and button elements ‘Set Height’, ‘Get Height’.
- In script we defined ready function for loads when program executes, within that we defined click event with button element ‘sg’ for loads function when user clicks on button ‘Set Height’.
- There we collecting user input by val() method and class ‘inpt’ then value stored on variable ‘h’. Next we sets that value ‘h’ to id ‘cont’ as height by height() method.
- By using click event, we loads function when user clicks button element ‘Set Height’ with class ‘gh’. There we collecting div element ‘cont’ height by height() method then value stored on variable ‘ght’. Next we prints that value ‘ght’ on console panel.
- For seeing console result we needs to use shortcut ‘ctrl+shift+j’ then console panel will open with height of div in px.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to get div elements height dynamically using javascript.
When we executes program on browser we can see div content with box, input field and Set Height, Get Height buttons now user needs to fill input box by giving height then clicks on Set Height button then we can see div height get increased on webpage based on user input and when user clicks on Get Height button then we can updated height of div on console.
Must confirm one thing before execution network connection without internet code can’t executed successfully.
I hope this tutorial on JavaScript get div height dynamically helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
