Javascript DOM CSS Style clip Property

Introduction

Clip an image into a specified shape: 

document.getElementById("myImg").style.clip = "rect(0px 75px 75px 0px)";

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
img {//from  w  ww  . j  a  va 2s .  c o m
  position: absolute;
  top: 50px;
}
</style>
</head>
<body>

<img id="myImg" src="image1.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 clip property sets or gets which part of a positioned element is visible.

Property Values

Value Description
autoDefault. No clipping
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.

The clip property returns a String representing the part of a positioned element that is visible.




PreviousNext

Related