How To Use offsetHeight and offsetWidth Property Using JavaScript?
Hello Friends,
Now let's see example of how to use offsetHeight and offsetWidth property example. We will use offsetHeight and offsetWidth property using javascript. This is a short guide on use offsetHeight and offsetWidth property in javascript. Let's get started with how to use offsetHeight and offsetWidth property in javascript.
Here i will give you many example how to use offsetHeight and offsetWidth property using javascript.
Example : 1
<html>
<head>
<title>How To Use offsetHeight and offsetWidth Property Using JavaScript? - MyWebtuts.com</title>
<style>
#a1{
height: 150px;
width: 200px;
margin: 20 20 20 0px;
padding: 15px;
background-color: lightgray;
}
</style>
</head>
<body>
<h3>How To Use offsetHeight and offsetWidth Property Using JavaScript? - MyWebtuts.com</h3>
<div id= "a1">
<b>Information About This Div Tab : </b>
<p id= "a2"> </p>
</div>
<button type="a1" onclick="a3()"> Submit </button>
<script>
function a3() {
var test = document.getElementById("a1");
var txt = "Height of the elements paragraph along with padding and border in pixels is: " + test.offsetHeight + "px";
document.getElementById("a2").innerHTML = txt;
}
</script>
</body>
</html>
Output :
Information About This Div Tab : Height of the elements paragraph along with padding and border in pixels is: 180pxExample : 2
<html>
<head>
<title>How To Use offsetHeight and offsetWidth Property Using JavaScript? - MyWebtuts.com</title>
<style>
#a1 {
height: 120px;
width: 350px;
margin: 20 20 20 0px;
padding: 15px;
background-color: lightgray;
}
</style>
</head>
<body>
<h3>How To Use offsetHeight and offsetWidth Property Using JavaScript? - MyWebtuts.com</h3>
<div id= "a1">
<b>Information About This Div Tab : </b>
<p id= "a2"> </p>
<p id= "a3"> </p>
</div>
<button type="button" onclick="offs()"> Submit </button>
<script>
function offs() {
var test = document.getElementById("a1");
var d1 = "OffsetHeight of the paragraph along with padding and border in pixels is: " + test.offsetHeight + "px";
var d2 = "OffsetWidth of the paragraph along with padding and border in pixels is: " + test.offsetWidth + "px";
document.getElementById("a2").innerHTML = d1;
document.getElementById("a3").innerHTML = d2;
}
</script>
</body>
</html>
Output :
Information About This Div Tab : OffsetHeight of the paragraph along with padding and border in pixels is: 150px OffsetWidth of the paragraph along with padding and border in pixels is: 380px
It will help you...