Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> HTML

एचटीएमएल डोम स्टाइल शीर्ष संपत्ति

<घंटा/>

एचटीएमएल डोम स्टाइल टॉप प्रॉपर्टी एक एचटीएमएल दस्तावेज़ में एक स्थित एचटीएमएल तत्व की शीर्ष स्थिति को वापस लौटाती है और संशोधित करती है।

सिंटैक्स

निम्नलिखित वाक्य रचना है -

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>

आउटपुट

एचटीएमएल डोम स्टाइल शीर्ष संपत्ति

"शीर्ष स्थान सेट करें . पर क्लिक करें गुलाबी वर्ग की शीर्ष स्थिति सेट करने के लिए ” बटन।

एचटीएमएल डोम स्टाइल शीर्ष संपत्ति


  1. एचटीएमएल डोम स्टाइल काउंटर रीसेट संपत्ति

    HTML DOM Style counterReset प्रॉपर्टी का उपयोग काउंटर को एक निश्चित मान पर रीसेट करने या एक बनाने के लिए किया जाता है। इसका उपयोग आमतौर पर काउंटर को बढ़ाने या घटाने के लिए काउंटर-इंक्रीमेंट प्रॉपर्टी के साथ किया जाता है। − . के लिए वाक्य रचना निम्नलिखित है काउंटर रीसेट गुण सेट करना - object.style.

  1. HTML DOM स्टाइल काउंटरइन्क्रीमेंट प्रॉपर्टी

    HTML DOM Style counterIncrement प्रॉपर्टी का उपयोग एक या अधिक CSS काउंटर के मान को बढ़ाने या घटाने के लिए किया जाता है। इसका उपयोग आमतौर पर काउंटर रीसेट और सामग्री संपत्ति के साथ किया जाता है। − . के लिए वाक्य रचना निम्नलिखित है काउंटरइन्क्रिमेंट प्रॉपर्टी सेट करना - object.style.counterIncrement

  1. एचटीएमएल डोम मूल्य संपत्ति

    HTML DOM मान गुण किसी तत्व की विशेषता के मान के अनुरूप स्ट्रिंग लौटाता है। निम्नलिखित वाक्य रचना है - रिटर्निंग स्ट्रिंग मान elementAttribute.value आइए HTML DOM मान का एक उदाहरण देखें संपत्ति - उदाहरण <!DOCTYPE html> <html> <head> <title>HTML DOM value</title> <st