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

You are here: Reference > JavaScript > client-side > style handling > properties > pixelTop

pixelTop property

Browser support:

Specifies or retrieves the value of the top style property, in pixels.

With the bottom style property you can set or return the top position of an element with a unit designator as a string. The pixelTop property specifies or retrieves the top position as an integer, in pixels. When the value of the pixelTop property is set, the unit type of the top style property is not changed. The value will be converted to the current unit type of the top style property. If you want to set or retrieve the top position as a floating-point number that specifies the value in the current unit type of the top style property, use the posTop property.

The properties mentioned above can be used to access style settings. If you need the top position of a rendered element, you can use the offsetTop property and the getBoundingClientRect method.

The currentStyle.pixelTop property is read-only, all others are read/write.

Syntax:

object.pixelTop;

You can find the related objects in the Supported by objects section below.

Possible values:

Integer that sets or returns the top position, in pixels.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the pixelTop property:

<head>
    <script type="text/javascript">
        function GetTopPos (elem) {
            var topStyle = elem.style.top;
            var topPx = elem.style.pixelTop;
            var topPos = elem.style.posTop;
            alert ("The top position of the button: " + topStyle +
                   "\n without unit type: " + topPos + 
                   "\n in pixels: " + topPx); 
        }
    </script>
</head>
<body>
    <button style="position:absolute; left:10%; top:40%; width:160px; height:30px;" 
            onclick="GetTopPos (this);">Get top position!</button>
</body>