HTML DOM Style objectPosition प्रॉपर्टी

परिचय

HTML DOM Style objectPosition प्रॉपर्टी HTML दस्तावेज़ में इमेज या वीडियो एलिमेंट को उसके अपने कंटेंट बॉक्स में कैसे स्थित किया जाए, यह निर्दिष्ट करती है। यह object-fit प्रॉपर्टी के साथ मिलकर काम करती है।

सिंटैक्स

1. objectPosition मान प्राप्त करना

object.style.objectPosition

2. objectPosition मान सेट करना

object.style.objectPosition = "value"

मान

उदाहरण

इस उदाहरण में, एक इमेज पर object-fit: cover लागू है। जब "Set objectPosition" बटन पर क्लिक किया जाता है, तो इमेज को कंटेंट बॉक्स के निचले-दाएं कोने (100% 100%) पर स्थित किया जाता है।

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    text-align: center;
    font-family: Arial, sans-serif;
    padding: 20px;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem auto;
  }
  .img-class {
    width: 200px;
    height: 250px;
    object-fit: cover;
    border: 2px solid #ddd;
  }
</style>
<body>
<h1 style="text-align:center">DOM Style objectPosition प्रॉपर्टी डेमो</h1>
<img alt="Learn Java Swing" src="https://www.tutorialspoint.com/swing/images/swing-mini-logo.jpg" class="img-class" width='300' height='200'>
<button class="btn" onclick="setPosition()">Object Position सेट करें</button>
<script>
  function setPosition() {
    document.querySelector('.img-class').style.objectPosition = "100% 100%";
  }
</script>
</body>
</html>

आउटपुट

शुरुआत में इमेज केंद्र में स्थित होती है। "Object Position सेट करें" बटन पर क्लिक करने पर, इमेज कंटेंट बॉक्स के निचले-दाएं कोने में चली जाती है।

स्थिति मानों के उदाहरण

• "left top" या "0% 0%" - ऊपरी-बायाँ कोना
• "center" या "50% 50%" - केंद्र (डिफ़ॉल्ट)
• "right bottom" या "100% 100%" - निचला-दायाँ कोना
• "50px 100px" - विशिष्ट पिक्सेल मान

ब्राउज़र समर्थन

सभी आधुनिक ब्राउज़रों में समर्थित (IE11+ के लिए आंशिक समर्थन)।