How to get an HTML element actual width and height in JavaScript

70+ SQL courses for beginners and professionals

341 views

asked Feb 3, 2021 by avibootz
retagged Feb 3, 2021 by avibootz

Share on

share on gp share on fb share on tw share on li share on re share via email

1 Answer

<!DOCTYPE html>
<html>
  <head>
    <style>
      #divid {
        height: 200px;
        width: 250px;
        padding: 10px;
        margin: 15px;
        border: 3px solid blue;
      }
    </style>
  </head>
  <body>
    <div id="divid">
      <p>javascript programming</p>
    </div>
    <button onclick="GetWidthHeight()">Click To get width and height</button>
    <script>
      function GetWidthHeight() {
        let element = document.getElementById("divid");
        let width = "Width: " + element.offsetHeight + "px";
        let height = "Height: " + element.offsetWidth + "px";
        console.log(width);
        console.log(height);
      }
    </script>
  </body>
</html>



<!--
run:

"Width: 226px"
"Height: 276px"

-->

70+ SQL courses for beginners and professionals

answered Feb 3, 2021 by avibootz

...

Most popular tags

How to get an HTML element actual width and height in JavaScript

1 Answer

Related questions