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

एचटीएमएल डोम स्क्रॉलटॉप प्रॉपर्टी


HTML DOM स्क्रॉलटॉप प्रॉपर्टी HTML दस्तावेज़ में पिक्सेल में लंबवत रूप से स्क्रॉल किए गए तत्व की सामग्री के मान को लौटाती है और संशोधित करती है।

सिंटैक्स

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

  • रिटर्निंग स्क्रॉलटॉप

element.scrollTop
  • स्क्रॉलटॉप जोड़ना

element.scrollTop = value

यहां मान पिक्सेल में है

उदाहरण

आइए स्क्रॉलटॉप प्रॉपर्टी का एक उदाहरण देखें -

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
      color:#fff;
      background: #ff7f5094;
      height:100%;
   }
   p{
      font-weight:700;
      font-size:1.8rem;
      height:80px;
      overflow:auto;
      width:150px;
      margin:20px auto;
   }
   .btn{
      background:#0197F6;
      border:none;
      height:2rem;
      border-radius:2px;
      width:35%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
   .show{
      font-size:1.5rem;
   }
   #myDIV {
      height: 200px;
      width: 200px;
      overflow: auto;
      margin:20px auto;
   }
   #content {
      height: 400px;
      width: 1000px;
      background-color: lightblue;
   }
</style>
</head>
<body>
<h1>DOM scrollLeft/scrollTop Property Demo</h1>
<div id="myDIV" onscroll="display()">
<div id="content"></div>
</div>
<div class="show"></div>
<script>
   function display() {
      var elmnt = document.getElementById("myDIV");
      var x = elmnt.scrollLeft;
      var y = elmnt.scrollTop;
      document.querySelector(".show").innerHTML = "Top Scroll = " + x + "px Left Scroll = " + y + "px";
   }
</script>
</body>
</html>

आउटपुट

यह निम्नलिखित आउटपुट उत्पन्न करेगा -

एचटीएमएल डोम स्क्रॉलटॉप प्रॉपर्टी

अब नीले . के अंदर स्क्रॉल करें शीर्ष स्क्रॉल और बाएँ स्क्रॉल का मान प्राप्त करने के लिए बॉक्स।

एचटीएमएल डोम स्क्रॉलटॉप प्रॉपर्टी


  1. एचटीएमएल डोम ऑफसेटविड्थ संपत्ति

    HTML DOM ऑफ़सेटविड्थ प्रॉपर्टी एक तत्व की चौड़ाई के अनुरूप संख्या लौटाती है, जिसमें उसकी पैडिंग, बॉर्डर और स्क्रॉलबार शामिल हैं, लेकिन उसका मार्जिन नहीं। निम्नलिखित वाक्य रचना है - वापसी संख्या मान HTMLelement.offsetWidth आइए एक उदाहरण देखें HTML DOM ऑफसेटविड्थ संपत्ति - उदाहरण <!DOCTYPE html&

  1. HTML DOM ऑफ़सेटपैरेंट प्रॉपर्टी

    HTML DOM ऑफ़सेटपैरेंट प्रॉपर्टी संदर्भित मूल तत्व लौटाती है जिससे चाइल्ड ऑफ़सेट परिभाषित किया गया है। निम्नलिखित वाक्य रचना है - रिटर्निंग संदर्भित ऑफसेट मूल तत्व HTMLelement.offsetParent आइए एक उदाहरण देखें HTML DOM ऑफ़सेट पैरेंट संपत्ति - उदाहरण <!DOCTYPE html> <html> <head> &

  1. एचटीएमएल डोम शीर्षक संपत्ति

    HTML DOM शीर्षक गुण HTML तत्व की शीर्षक विशेषता के मान के अनुरूप स्ट्रिंग देता है/सेट करता है। शीर्षक मान HTML तत्व पर मँडराते समय दिखाई देता है। निम्नलिखित वाक्य रचना है - रिटर्निंग स्ट्रिंग मान ElementOfHTMLObject.title शीर्षक सेट करें एक स्ट्रिंग मान के लिए ElementOfHTMLObject.title = string उ