The Style clip property in HTML DOM is used to set or return the visible part of a positioned element.
Syntax:
- It returns the clip property.
object.style.clip
- It is used to set the clip property.
object.style.clip = "rect(top right bottom left)|normal|initial|
inherit"
Note: This property has been deprecated.
Return Values: It returns a string value, which represents the part of a positioned element that is visible.
Property Values:
1. rect(top right bottom left): This value is used to clip the element in a rectangular shape. The top, right, bottom and left values are used to define the points of the rectangle.
Example-1:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style clip Property
</title>
<style>
#myImage {
position: absolute;
}
button {
margin-top: 400px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>DOM Style clip Property</b>
<p>
The clip property is used to specify
the part of a positioned element that is visible.
</p>
<img src=
id="myImage">
<button onclick="setClip()">
Set Clip Property
</button>
<script>
function setClip() {
elem =
document.querySelector('#myImage');
elem.style.clip =
'rect(75px 250px 250px 75px)';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
2. normal: This value does not clip the element. This is the default value.
Example-2:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style clip Property
</title>
<style>
#myImage {
position: absolute;
clip: rect(50px 200px 200px 50px);
}
button {
margin-top: 400px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>DOM Style clip Property</b>
<p>
The clip property is used to specify
the part of a positioned element
that is visible.
</p>
<img src=
id="myImage">
<button onclick="setClip()">
Set Clip Property
</button>
<script>
function setClip() {
elem =
document.querySelector('#myImage');
elem.style.clip = 'auto';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
3. initial: This is used to set this property to its default value.
Example-3:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style clip Property
</title>
<style>
#myImage {
position: absolute;
clip: rect(75px 300px 300px 75px);
}
button {
margin-top: 400px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
DOM Style clip Property
</b>
<p>
The clip property is used to specify
the part of a positioned element
that is visible.
</p>
<img src=
id="myImage">
<button onclick="setClip()">
Set Clip Property
</button>
<script>
function setClip() {
elem =
document.querySelector(
'#myImage');
elem.style.clip = 'initial';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
4. inherit: This inherits the property from its parent.
Example-4:
html
<!DOCTYPE html>
<html>
<head>
<title>
DOM Style clip Property
</title>
<style>
#parent {
clip: rect(75px 300px 300px 75px);
}
#myImage {
position: absolute;
}
button {
margin-top: 400px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>DOM Style clip Property</b>
<p>
The clip property is used to specify
the part of a positioned element that
is visible.
</p>
<div id="parent">
<img src=
id="myImage">
</div>
<button onclick="setClip()">
Set Clip Property
</button>
<script>
function setClip() {
elem =
document.querySelector(
'#myImage');
elem.style.clip = 'inherit';
}
</script>
</body>
</html>
|
Output:
Before clicking the button:
After clicking the button:
Supported Browsers: The browser supported by DOM Style clip property are listed below:
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Apple Safari