HTML DOM style clip प्रॉपर्टी का उपयोग स्थित (positioned) तत्व के दृश्य भाग को सेट या प्राप्त करने के लिए किया जाता है।
सिंटैक्स निम्नलिखित है:
clip प्रॉपर्टी सेट करना:
object.style.clip = "auto|rect(top right bottom left)|initial|inherit"
उपरोक्त प्रॉपर्टी निम्नलिखित हैं:
| मान | विवरण |
|---|---|
| auto | तत्व क्लिप नहीं करता है और यह डिफ़ॉल्ट मान है। |
| rect(top right bottom left) | यह दिए गए चार निर्देशांकों के अनुसार आकार को क्लिप करता है। |
| initial | इस प्रॉपर्टी को प्रारंभिक मान पर सेट करने के लिए। |
| inherit | मूल तत्व के प्रॉपर्टी मान को विरासत में लेने के लिए। |
आइए clip प्रॉपर्टी के लिए एक उदाहरण देखें:
उदाहरण
<!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="इमेज क्लिप प्रॉपर्टी अब बदल गई है"; } </script> </head> <body> <div > <img id="IMG1" src="https://www.tutorialspoint.com/hibernate/images/hibernate-mini-logo.jpg"> <p id="P1">नीचे दिए गए बटन पर क्लिक करके उपरोक्त इमेज क्लिप प्रॉपर्टी बदलें</p> <button onclick="changeClip()">क्लिप बदलें</button> <p id="Sample"></p> </div> </body> </html>आउटपुट
क्लिप बदलें बटन पर क्लिक करने पर:
