You are here: Reference > JavaScript > client-side > HTML DOM > properties > clientTop

clientTop property

Browser support:
Returns the height of the top border in pixels.

Syntax:

object.clientTop;
You can find the related objects in the Supported by objects section below.
This property is read-only.

Note that the clientTop property does not work for HTML elements whose display type is inline. There are several HTML elements (inline HTML elements), whose display type is inline by default (such as: a, span, b, img etc.). If you need to use the clientTop property of an inline HTML element, set its display style property to 'block'.

Possible values:

Integer that represents the height in pixels.
Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the clientTop property:
<head>
    <style>
        .examDiv {
            margin: 15px;
            border: 2px solid red;
            padding: 20px;
            
            overflow: scroll;
        }
    </style>
    <script type="text/javascript">
        function GetClientTop () {
            var div = document.getElementById ("myDiv");
            alert ("The height of the top border: " + div.clientTop + "px");
        }
    </script>
</head>
<body>
    <div id="myDiv" class="examDiv">
        This element has the following style settings:<br />
        margin:15px; border:2px solid red; padding:20px;
    </div>
    <button onclick="GetClientTop ();">Test clientTop property!</button>
</body>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content