The HTML DOM style clip property is used for setting or getting the positioned element visible part.
Following is the syntax for −
Setting the clip property −
object.style.clip = "auto|rect(top right bottom left)|initial|inherit"
The above properties are explained as follows −
| Value | Description |
|---|---|
| auto | The element doesn’t clip and this is the default value. |
| rect(top right bottom left) | It clips the shape according to the given four coordinates. |
| initial | For setting this property to initial value. |
| inherit | To inherit the parent property value |
Let us look at an example for the clip property −
Example
<!DOCTYPE html>
<html>
<head>
<style>
div{
position:relative;
}
#IMG1{
width:200px;
height:200px;
position:absolute;
}
#P1{
position:absolute;
margin-top:210px;
}
button{
margin-top: 250px;
}
</style>
<script>
function changeClip(){
document.getElementById("IMG1").style.clip="rect(0px 75px 75px 0px)";
document.getElementById("Sample").innerHTML="The image clip property is changed now ";
}
</script>
</head>
<body>
<div >
<img id="IMG1" src="https://www.tutorialspoint.com/hibernate/images/hibernate-mini-logo.jpg">
<p id="P1">Change the above image clip property by clicking the below button</p>
<button onclick="changeClip()">Change Clip</button>
<p id="Sample"></p>
</div>
</body>
</html>Output
On clicking the “Change Clip” button −
