एचटीएमएल डोम स्टाइल टॉप प्रॉपर्टी एक एचटीएमएल दस्तावेज़ में एक स्थित एचटीएमएल तत्व की शीर्ष स्थिति को वापस लौटाती है और संशोधित करती है।
सिंटैक्स
निम्नलिखित वाक्य रचना है -
1. रिटर्निंग टॉप
object.top
2. शीर्ष को संशोधित करना
object.top = “value”
यहाँ, मान हो सकता है -
Sr.No | मान और स्पष्टीकरण |
---|---|
1 | प्रारंभिक यह इस गुण मान को इसके डिफ़ॉल्ट मान पर सेट करता है। |
2 | उत्तराधिकारी यह इस संपत्ति मूल्य को अपने मूल तत्व से प्राप्त करता है। |
3 | प्रतिशत (%) यह मूल तत्व की चौड़ाई के प्रतिशत में मान को परिभाषित करता है। |
4 | लंबाई यह लंबाई इकाई में मान शीर्ष को परिभाषित करता है। |
5 | स्वतः यह ब्राउज़र को शीर्ष स्थान का मान निर्धारित करने देता है। |
आइए एचटीएमएल डोम स्टाइल टॉप प्रॉपर्टी का एक उदाहरण देखें -
उदाहरण
<!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 Style top Property Demo</h1> <div class='square'></div> <button onclick="set()" class="btn">Set top position</button> <script> function set() { document.querySelector('.square').style.top = "200px"; } </script> </body> </html>
आउटपुट
"शीर्ष स्थान सेट करें . पर क्लिक करें गुलाबी वर्ग की शीर्ष स्थिति सेट करने के लिए ” बटन।