HTML | DOM Style clip Property
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"> w3wiki </ 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= "https://media.w3wiki.net/wp-content/uploads/20190311222622/sample-image.png" id="myImage"> < button onclick="setClip()"> Set Clip Property </ button > <!-- Script to set clip to rect() --> < 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"> w3wiki </ 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= "https://media.w3wiki.net/wp-content/uploads/20190311222622/sample-image.png" id="myImage"> < button onclick="setClip()"> Set Clip Property </ button > <!-- Script to set clip to auto --> < 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"> w3wiki </ 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= "https://media.w3wiki.net/wp-content/uploads/20190311222622/sample-image.png" id="myImage"> < button onclick="setClip()"> Set Clip Property </ button > <!-- Script to set clip to initial --> < 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"> w3wiki </ 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= "https://media.w3wiki.net/wp-content/uploads/20190311222622/sample-image.png" id="myImage"> </ div > < button onclick="setClip()"> Set Clip Property </ button > <!-- Script to set clip to inherit --> < 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
Contact Us