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

clipLeft property (currentStyle)

Browser support:
Returns the left 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 clipLeft, 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 left coordinate or the 'auto' string constant
One of the following values:
The left 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 clipLeft property:
        #myImage {
            clip:rect(20px 150px 150px 20px);
    <script type="text/javascript">
        function GetClips (event) {
            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 (event);">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