HTML DOM clientWidth Property

HTML DOM clientHeight Property

Last Updated : 13 Jun, 2023

The DOM clientHeight property is used to return the viewable height of an element in terms of the pixel. It includes the measurement of the width of padding but does not include the margin, border, and scrollbar property for the measurement of the element width. This property only returns the actual height of an element that is viewable or visible to the user It is a read-only property.

Syntax:

element.clientHeight

Return Value: It returns a numeric value which represent the viewable height of the element.

Example:

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML | DOM clientHeight Property
    </title>
    <style>
        h1 {
            color: green;
            font-size: 35px;
        }
        
        #GFG {
            height: 100px;
            width: 350px;
            padding: 40px;
            margin: 25px;
            border: 5px solid coral;
            background-color: green;
        }
    </style>
</head>

<body>
    <center>
        <h1>GeeksForGeeks</h1>
        <h2>DOM clientHeight Property </h2>

        <div id="GFG">
            <p style="color:white;font-size:25px;">
                GeeksforGeeks
            </p>
            <p id="sudo" style="color:white;"></p>
        </div>
        <button onclick="Geeks()">Submit</button>
        <script>
            function Geeks() {
                var w = document.getElementById("GFG");

                // Using clientHeight property
                var x = "viewable Height is: " 
                + w.clientHeight + "px<br>";

                x += "viewable width is:: " 
                + w.clientWidth + "px";
                document.getElementById("sudo").innerHTML = x;
            }
        </script>
      </center>
</body>
</html>

Output:

Initially:

After Click on the Button:

Supported Browsers: The browser supported by DOM clientHeight property are listed below:

Google Chrome 1.0 and above
Edge 12.0 and above
Internet Explorer 5.0 and above
Firefox 1.0 and above
Opera 8.0 and above
Safari 3.0 and above

HTML DOM clientWidth Property

M

manaschhabra2

Improve

Article Tags :

Similar Reads

HTML DOM clientLeft Property

The DOM clientLeft Property is used to return the width of the left border to an element in terms of pixel.It does not include the measurement of the width of the left padding or the left margin.It is read-only property. Syntax: element.clientLeft Return Value: It returns a numeric value which repre

HTML DOM clientWidth Property

The DOM clientWidth Property is used to return the viewable width of a specific element including padding but excluding the measurement of margin, border, and scrollbar width. This property only returns the actual width of an element that is viewable or visible to the user. It is a read-only propert

HTML DOM clientTop Property

The DOM clientTop Property is used to return the width of the top border to an element in terms of pixel.It does not include the measurement of the width of the top padding or the left margin.It is read-only property. Syntax: element.clientTop Return Value: It returns a numeric value which represent

HTML DOM Screen availHeight Property

The Screen availHeight property is used for returning the height of the user's screen, in pixels. The value returned by the Screen availHeight property is excluding the interface features like the Windows Taskbar. Syntax : screen.availHeightReturn Values: It returns a numeric value which, representi

HTML | DOM MouseEvent clientY Property

The MouseEvent clientY property is a read-only property which is used to return the vertical coordinate of the mouse pointer based on the current window when a mouse event was triggered. Syntax : event.clientY Return Value: It returns a number that represents the vertical coordinate of the mouse poi

HTML | DOM Style columnWidth Property

The columnWidth property in DOM is used to specify the width of the columns. Syntax: Return the columnWidth property: object.style.columnWidth Set the columnWidth property: object.style.columnWidth = "auto | length | initial | inherit" Return Values: It returns a string value, which represents the c

HTML | DOM embed height property

The embed height property in HTML DOM is used to set or return the value of the height attribute. The height attribute defines the height of the embedded content in terms of pixels. Syntax:Return the height property:embedObject.heightSet the height property:embedObject.height = pixelsProperty Values

CSS min-height Property

The min-height property in CSS is used to set the minimum height of an element. The min-height property is used when the content of the element is smaller than the min-height and if the content is larger than the min-height then it has no effect. This property ensures that the value of the height pr

CSS max-height Property

The max-height property in CSS is used to set the maximum height of an element. If the content of the element is larger than the specified maximum-height then the content will overflow otherwise it has no effect. If the content of the element is smaller then it has no effect. The height property val

HTML DOM Screen availWidth Property

The Screen availWidth property is used for returning the width of the user's screen, in pixels. The value returned by the Screen availWidth property is excluding the interface features like the Windows Taskbar. Syntax: screen.availWidth Return Value: It returns a numeric value which , representing t