x
1
2
<html>3
<head>4
<style>5
#myDIV {6
height: 250px;7
width: 400px;8
padding: 10px;9
margin: 15px;10
border: 5px solid red;11
background-color: lightblue;12
}13
</style>14
</head>15
<body>16
17
<p>Click the button to get the clientHeight, clientWidth, offsetHeight and offsetWidth of div.</p>18
19
<button onclick="myFunction()">Try it</button>20
21
<div id="myDIV">22
<b>Information about this div:</b><br>23
Height: 250px<br>24
Width: 400px<br>25
padding: 10px<br>26
margin: 15px<br>27
border: 5px<br>28
<p id="demo"></p>29
</div>30
31
<script>32
function myFunction() {33
var elmnt = document.getElementById("myDIV");34
var txt = "";35
txt += "Height including padding: " + elmnt.clientHeight + "px<br>";36
txt += "Height including padding and border: " + elmnt.offsetHeight + "px<br>";37
txt += "Width including padding: " + elmnt.clientWidth + "px<br>";38
txt += "Width including padding and border: " + elmnt.offsetWidth + "px";39
document.getElementById("demo").innerHTML = txt;40
}41
</script>42
43
</body>44
</html>