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

परिचय

HTML DOM Style order प्रॉपर्टी HTML दस्तावेज़ में एक ही कंटेनर के अंदर फ्लेक्सिबल आइटम्स के क्रम को निर्दिष्ट करती है। यह CSS Flexbox लेआउट का हिस्सा है और HTML मार्कअप बदले बिना विजुअल क्रम बदलने की अनुमति देती है।

सिंटैक्स

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

object.style.order

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

object.style.order = "value"

मान

उदाहरण

इस उदाहरण में, एक फ्लेक्स कंटेनर में तीन बॉक्स हैं। जब "Change order" बटन पर क्लिक किया जाता है, तो उनके क्रम को उलट दिया जाता है (पहला तीसरा बन जाता है, तीसरा पहला)।

<!DOCTYPE html>
<html>
<style>
  body {
    color: #000;
    height: 100vh;
    background-color: #8BC6EC;
    background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 20px;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
    margin: 1rem auto;
  }
  .container {
    border: 3px solid #fff;
    margin: 1rem auto;
    display: flex;
    padding: 2rem;
    justify-content: space-around;
  }
  .box {
    width: 100px;
    height: 100px;
  }
</style>
<body>
<h1 style="text-align:center">DOM Style order प्रॉपर्टी डेमो</h1>
<div class="container">
  <div class="box" id="b1" style="background-color:#7F055F;">1</div>
  <div class="box" id="b2" style="background-color:#3A015C;">2</div>
  <div class="box" id="b3" style="background-color:#177E89;">3</div>
</div>
<button onclick="changeOrder()" class="btn">क्रम बदलें</button>
<script>
  function changeOrder() {
    document.querySelector('#b1').style.order = "3";
    document.querySelector('#b2').style.order = "2";
    document.querySelector('#b3').style.order = "1";
  }
</script>
</body>
</html>

आउटपुट

शुरुआत में बॉक्स क्रम 1, 2, 3 में दिखाई देते हैं। "क्रम बदलें" बटन पर क्लिक करने पर, वे क्रम 3, 2, 1 (नीला, बैंगनी, गुलाबी) में पुनर्व्यवस्थित हो जाते हैं।

महत्वपूर्ण बिंदु

• केवल फ्लेक्स या ग्रिड कंटेनर के डायरेक्ट चाइल्ड्स पर काम करता है
• ऋणात्मक मान अनुमत हैं (जैसे -1 पहले आएगा)
• समान order मान वाले आइटम्स अपने स्रोत क्रम को बनाए रखते हैं
• एक्सेसिबिलिटी: स्क्रीन रीडर DOM क्रम पढ़ते हैं, विजुअल क्रम नहीं
• रिस्पॉन्सिव डिज़ाइन के लिए बहुत उपयोगी (मोबाइल पर अलग क्रम)

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

सभी आधुनिक ब्राउज़रों में पूर्ण समर्थन (IE10+ के लिए प्रीफिक्स के साथ)।