Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title> Title of the document </title> <style> body { text-align: center; } h1 { color: #8ebf42; } .box { height: 110px; width: 110px; background-color: #8ebf42; display: inline-block; } </style> </head> <body> <h1>W3Docs</h1> <b> Get the height of the element </b> <p> Click on the button to get the height of the element </p> <div class="box"></div> <p> Height of the div: <span class="output"></span> </p> <button onclick="getHeight()"> Get Height </button> <script type="text/javascript"> function getHeight() { divElement = document.querySelector(".box"); elemHeight = divElement.clientHeight; document.querySelector(".output") .textContent = elemHeight + "px"; } </script> </body> </html>