TryIt Editor v2.0 - How to Get the Height of an Element

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title> Title of the document </title>
    <style>
      #box {
        width: 280px;
        height: 170px;
        padding: 20px;
        text-align: justify;
        border: 10px solid #795d80;
        background: #a997ad;
        margin: 15px;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
  </head>
  <body>
    <div id="box">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
    <button type="button">Get innerWidth and innerHeight</button>
    <p id="result"></p>
    <hr>
  <script>
      $(document)
        .ready(function() {
          $("button")
            .click(function() {
              var divWidth = $("#box")
                .innerWidth();
              var divHeight = $("#box")
                .innerHeight();
              $("#result")
                .html("Inner Width: " + divWidth + ", " + "Inner Height: " + divHeight);
            });
        });
    </script>
  </body>
</html>