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

परिचय

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

सिंटैक्स

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

object.style.top

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

object.style.top = "value"

मान

उदाहरण

इस उदाहरण में, एक गुलाबी वर्ग (position: relative) है। जब "Set top position" बटन पर क्लिक किया जाता है, तो वर्ग को ऊपर से 200px नीचे ले जाया जाता है।

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    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 0;
  }
  .square {
    width: 100px;
    height: 100px;
    background: #db133a6b;
    position: relative;
  }
  .show {
    font-size: 1.2rem;
    margin: 1rem 0;
  }
</style>
<body>
<h1>DOM Style top प्रॉपर्टी डेमो</h1>
<div class='square'></div>
<button onclick="setTop()" class="btn">शीर्ष स्थिति सेट करें</button>
<script>
  function setTop() {
    document.querySelector('.square').style.top = "200px";
  }
</script>
</body>
</html>

आउटपुट

शुरुआत में गुलाबी वर्ग अपनी सामान्य स्थिति में होता है। "शीर्ष स्थिति सेट करें" बटन पर क्लिक करने पर, वर्ग अपनी मूल स्थिति से 200px नीचे चला जाता है।

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

• relative: एलिमेंट अपनी सामान्य स्थिति से ऑफसेट होता है
• absolute: निकटतम पोज़िशन्ड पैरेंट के सापेक्ष ऑफसेट होता है
• fixed: व्यूपोर्ट के सापेक्ष ऑफसेट होता है
• sticky: स्क्रॉल पोजिशन के आधार पर relative/fixed के बीच स्विच करता है

संबंधित प्रॉपर्टीज

• bottom - नीचे से दूरी
• left - बाएं से दूरी
• right - दाएं से दूरी
• z-index - स्टैक क्रम

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

सभी ब्राउज़रों में पूर्ण समर्थन।