Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> #divId { height: 200px; width: 350px; padding: 20px; margin: 25px; border: 2px solid green; } </style> </head> <body> <div id="divId"> <p>To get the height and width of element, including padding and border.</p> <p id="demo"></p> </div> <button onclick="GetHeightWidth()">Click on button</button> <script> function GetHeightWidth() { let elem = document.getElementById("divId"); let width = "Width: " + elem.offsetHeight + "px<br>"; let height = "Height: " + elem.offsetWidth + "px"; document.getElementById("demo").innerHTML = width + height; } </script> </body> </html>