HTML DOM स्टाइल right प्रॉपर्टी: पोजिशन्ड एलिमेंट की राइट पोजीशन नियंत्रित करना

HTML DOM स्टाइल right प्रॉपर्टी HTML दस्तावेज़ में एक पोजिशन्ड HTML एलिमेंट की राइट पोजीशन को लौटाती और संशोधित करती है। यह केवल उन एलिमेंट्स पर काम करती है जिनकी position प्रॉपर्टी static के अलावा कुछ भी है (relative, absolute, fixed, sticky)।

सिंटैक्स

1. right प्राप्त करना:

object.right

2. right संशोधित करना:

object.right = "value"

मानों के प्रकार

उदाहरण: राइट पोजीशन सेट करना

<!DOCTYPE html>
<html>
<style>
  body { color: #000; height: 100vh; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem 0; }
  .square { width: 100px; height: 100px; background: #db133a6b; position: relative; }
  .show { font-size: 1.2rem; margin: 1rem 0; }
</style>
<body>
  <h1>DOM स्टाइल right प्रॉपर्टी डेमो</h1>
  <div class='square'></div>
  <button onclick="set()" class="btn">राइट पोजीशन सेट करें</button>
  <script>
    function set() {
      document.querySelector('.square').style.right = "-400px";
    }
  </script>
</body>
</html>

आउटपुट

1. प्रारंभ में: गुलाबी वर्ग सामान्य स्थिति में (left: 0, right: auto)
2. "राइट पोजीशन सेट करें" क्लिक: right: -400px सेट होता है, वर्ग दाएं 400px खिसक जाता है (कंटेनर से बाहर)

पोजिशनिंग कॉन्टेक्स्ट

right vs left

• left: बाएं किनारे से दूरी
• right: दाएं किनारे से दूरी
• दोनों सेट करने पर: एलिमेंट की चौड़ाई बाध्य होती है (यदि width auto है)
• right: 0; left: 0; → पूरी चौड़ाई भरता है