clip Property - Javascript CSS Style Property

Javascript examples for CSS Style Property:clip

  1. HOME
  2. Javascript
  3. CSS Style Property
  4. clip

Description

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

Property Values

Value Description
autoDefault. The element does not clip
rect(top right bottom left) Clips the shape defined by the four coordinates
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

Technical Details

Item Value
Default Value: auto
Return Value: A String, representing the part of a positioned element that is visible
CSS VersionCSS2

Set an image into a specified shape:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<body>

<button type="button" onclick="myFunction()">Return the value of the clip property</button><br>

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

<script>
function myFunction() {/*from  w  w w .  ja v a 2 s .c  o m*/
    document.getElementById("myImg").style.clip = 'rect(60px,10px,20px,0px)';
}
</script>

</body>
</html>

Related Tutorials