You are here: Reference > JavaScript > client-side > style handling > properties > clipBottom (currentStyle)

clipBottom property (currentStyle)

Browser support:
Returns the bottom coordinate of the clipping region relative to the upper left corner of the object.
A clipping region for an element can be set or retrieved with the clip style property, in a shorthand form. In Internet Explorer, the components of the clipping region can be retrieved with the clipBottom, clipTop, clipRight and clipBottom properties.


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

Possible values:

String that represents the bottom coordinate or the 'auto' string constant.
One of the following values:
The bottom side is not clipped.
A floating-point number followed by a units designator (cm, mm, in, pt, or pc, em, ex, or px).
Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the clipBottom property:
        #myImage {
            clip:rect(20px 150px 150px 20px);
    <script type="text/javascript">
        function GetClips () {
            var image = document.getElementById ("myImage");
            var t = image.currentStyle.clipTop; 
            var l = image.currentStyle.clipLeft; 
            var b = image.currentStyle.clipBottom; 
            var r = image.currentStyle.clipRight; 
            alert ("clipTop: " + t + "\n clipLeft: " + l
                + "\n clipBottom: " + b + "\n clipRight: " + r);
    <button onclick="GetClips ();">Get clip positions!</button>
    <img id="myImage" src="area.gif" height="150" width="150">
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content