Hello Reader's If you are dealing with JQuery in your website and want to get the height and width of any html element then this blog will very helpful to you.
So lets get started working of getting the height and width of a div .
First you need to create div and assign it's height and width by using css. And it's html code will go like this:-
<!DOCTYPE html>
<html>
<head>
<style>
#divcss {
height: 100px;
width: 300px;
padding: 10px;
margin: 3px;
border: 1px solid blue;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="divcss"></div>
<br>
<button>Display dimensions of div</button>
<p>width() - returns the width of an element.</p>
<p>height() - returns the height of an element.</p>
</body>
</html>
Now we have to call the jquery file. You can use it via CDN of google also then write the script for getting the required dimension and its script will go like this:-
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "Width of div: " + $("#divcss").width() + "</br>";
txt += "Height of div: " + $("#divcss").height();
$("#div1").html(txt);
});
});
</script>
Now as the script will load on page the .width() and .height() function will get the dimensions of div which have id "divcss". And on clicking the button the values will be printed on the line which tells the values.
0 Comment(s)