Javascript Reference - HTML DOM Style clip Property

The clip property sets or gets which part of a positioned element is visible.

Browser Support


`clip`	Yes	Yes	Yes	Yes	Yes

Syntax

Return the clip property:

var v = object.style.clip

Set the clip property:

object.style.clip='auto|rect(top right bottom left)|initial|inherit'

Property Values

auto: Default. No clipping.
shape: Clips an element. The only valid value is: rect (top, right, bottom, left)
initial: sets to default value
inherit: Inherits this property from its parent element

Technical Details

Default Value:	auto
Return Value:	A string representing the visible part of a positioned element
CSS Version	CSS2

Example

The following code shows how to Clip an image into a specified shape


<!DOCTYPE html>
<html>
<head>
<style>
img {<!-- ww  w  .  j  av  a 2s  . com-->
    position: absolute;
    top: 50px;
}
</style>
</head>
<body>

<img id="myImg" src="http://java2s.com/style/demo/border.png" width="100" height="132">

<button type="button" onclick="clipImage()">Clip image</button>
<button type="button" onclick="clearClip()">Unclip image</button>

<script>
function clipImage() {
    document.getElementById("myImg").style.clip = "rect(0px 75px 75px 0px)";
}

function clearClip() {
    document.getElementById("myImg").style.clip = "auto";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to return the clip property.


<!DOCTYPE html>
<html>
<body>
<!--  ww  w.  jav  a 2 s. co m-->
<button type="button" onclick="myFunction()">test</button><br>

<img id="myImg" style="position:absolute;clip:rect(0px,60px,200px,0px);" 
     src="http://java2s.com/style/demo/border.png" width="100" height="132">

<script>
function myFunction() {
    console.log(document.getElementById("myImg").style.clip);
}
</script>

</body>
</html>

The code above is rendered as follows: