JavaScript Set Height Of DIV Dynamically
Last Updated : Jul 1, 2023
IN - JavaScript | Written & Updated By - Pragati
In this tutorial we will show you the solution of JavaScript set height of div dynamically, here we needs to use jquery for collect height from different users dynamically then we sets user input as height for div element.
So we must import external open source jquery library support then only we can see the changes on div element otherwise we can’t see any changes on div element output.
Step By Step Guide On JavaScript Set Height Of DIV Dynamically :-
Here we defined div, input tag, button elements. The div element helps us to show changes on div height, input tag for collects dynamic height size from different users, button will loads function when user clicks on it.
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’.
<!DOCTYPE html>
<html>
<head>
<title>SET DYNAMIC HEIGHT FOR 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>Set Height</button>
<script>
$(document).ready(function(){
$("button").click(function(){
var h=$(".inpt").val();
$("#cont").height(h);
})
})
</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 element ‘Set Height’.
- In script we defined ready function for loads when program executes, within that we defined click event with button element 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.
- 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 set div elements height dynamically using javascript.
When we executes program on browser we can see div content with box, input field and Set Height button 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.
Must confirm one thing before execution network connection without internet code can’t executed successfully.
I hope this tutorial on JavaScript set height of div dynamically helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
