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

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

pixelBottom property

Browser support:

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

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

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

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

Syntax:

object.pixelBottom;

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

Possible values:

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

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the pixelBottom property:

<head>
    <script type="text/javascript">
        function GetBottomPos (elem) {
            var bottomStyle = elem.style.bottom;
            var bottomPos = elem.style.posBottom;
            var bottomPx = elem.style.pixelBottom;
            alert ("The bottom position of the button: " + bottomStyle +
                   "\n without unit type: " + bottomPos + 
                   "\n in pixels: " + bottomPx); 
        }
    </script>
</head>
<body>
    <button style="position:absolute; right:10%; bottom:40%; width:160px; height:30px;" 
            onclick="GetBottomPos (this);">Get bottom position!</button>
</body>