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>
Did you find this example helpful? yes no

Supported by objects:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content