HTML DOM स्टाइल क्लिप प्रॉपर्टी का इस्तेमाल पोजीशन एलिमेंट के दृश्य भाग को सेट करने या प्राप्त करने के लिए किया जाता है।
−
. के लिए वाक्य रचना निम्नलिखित हैक्लिप गुण सेट करना -
object.style.clip = "auto|rect(top right bottom left)|initial|inherit"
उपरोक्त गुणों को इस प्रकार समझाया गया है -
| मान | <वें शैली ="पाठ-संरेखण:केंद्र;">विवरण|
|---|---|
| ऑटो | तत्व क्लिप नहीं करता है और यह डिफ़ॉल्ट मान है। |
| rect(ऊपर दाएं नीचे बाएं) | यह दिए गए चार निर्देशांकों के अनुसार आकृति को क्लिप करता है। |
| आरंभिक | इस गुण को प्रारंभिक मान पर सेट करने के लिए। |
| उत्तराधिकारी | मूल संपत्ति मूल्य प्राप्त करने के लिए |
आइए हम क्लिप गुण के लिए एक उदाहरण देखें -
उदाहरण
<!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> आउटपुट
“क्लिप बदलें” . क्लिक करने पर बटन -
