HiHow to get height of element in HTML using JavaScriptltdiv style34width 300px height 100px34gt lth3 style34colorwhite34gtASPSnippetslth3gtltdivgt

JavaScript: Get (Find) width of element in HTML

makenzi....

SOLVED CLOSED ACTIVE ANSWERED
User: makenzi.exc
Posted: on Mar 23, 2025 03:27 AM
Forum: HTML and CSS
Replies: 1
Views: 817

Hi,

How to get height of element in HTML using JavaScript.

<div style="width: 300px; height: 100px">
    <h3 style="color:white">ASPSnippets</h3>
</div>

Mudassar

0 1

Reply
User: Mudassar
Replied: on Apr 03, 2025 09:44 PM
Report

Hi makenzi.exc,

Use JavaScript offsetWidth.

Refer below example.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style type="text/css">
        body { font-family: Arial; font-size: 10pt; }
    </style>
</head>
<body>
    <div id="dvContent" align="center" style="background: #61028D; width: 300px; height: 50px;  line-height: 50px">
        <div style="width: 300px">
            <h3 style="color:white">Welcome to ASPSnippets</h3>
        </div>
    </div>
    <br />
    <input type="button" value="Get Width" onclick="GetDimension()" />
    <script type="text/javascript">
        function GetDimension() {
            // Reference Element.
            const element = document.getElementById('dvContent');

            // Get Width.
            const width = element.offsetWidth;

            alert("Width is " + width + "px.");
        }
    </script>
</body>
</html>

Demo

Screenshot

Downloads

Download Sample

JavaScript: Get (Find) width of element in HTML

Company

Explore

Follow us

Contact Us