In order to access this site you need to enable JavaScript!

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

clientTop property

Browser support:

Returns the height of the top border in pixels.

Another way to get the height of an element's top border is to use the borderTopWidth property of the CSSStyleDeclaration and currentStyle objects.
If you need the top position of an element, see the page for the offsetTop property.
If you need the top position of the browser window, use the screenY or screenTop property.

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>