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

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.

Syntax:

object.clipLeft;

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:

auto

The left side is not clipped.

coord

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:

<head>
    <style>
        #myImage {
            position:absolute;
            top:30px;
            left:30px;
            clip:rect(20px 150px 150px 20px);
        }
    </style>
    <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);
        }
    </script>
</head>
<body>
    <button onclick="GetClips (event);">Get clip positions!</button>
    <img id="myImage" src="area.gif" height="150" width="150">
</body>