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

style.outlineOffset प्रॉपर्टी क्या है?

DOM style.outlineOffset प्रॉपर्टी किसी तत्व के आउटलाइन और उसके बॉर्डर/एज के बीच की दूरी (स्पेस) को प्राप्त या सेट करती है। यह CSS outline-offset प्रॉपर्टी के अनुरूप है। आउटलाइन बॉर्डर के विपरीत, तत्व के आयामों में जगह नहीं लेता और न ही लेआउट को प्रभावित करता है।

सिंटैक्स

आउटलाइन ऑफसेट प्राप्त करना

object.style.outlineOffset

आउटलाइन ऑफसेट सेट करना

object.style.outlineOffset = "value"

मान

• लंबाई इकाइयाँ: px, em, rem, आदि। (नकारात्मक मान अनुमत हैं - आउटलाइन को तत्व के अंदर खींचता है)।
• inherit, initial, unset।

उदाहरण

यह उदाहरण एक हरे बॉक्स के चारों ओर आउटलाइन ऑफसेट जोड़ता है:

<!DOCTYPE html>
<html>
<head>
<style>
  body { color: #000; background: lightblue; height: 100vh; }
  p {
    background-color: seagreen;
    height: 200px;
    width: 200px;
    outline: 3px solid #000;
    border: 3px solid #fff;
    margin: 1.5rem auto;
  }
  .btn {
    background: #db133a;
    border: none;
    height: 2rem;
    border-radius: 2px;
    width: 40%;
    display: block;
    color: #fff;
    outline: none;
    cursor: pointer;
  }
</style>
</head>
<body>
<h1>DOM Style outlineOffset प्रॉपर्टी उदाहरण</h1>
<p></p>
<button onclick="addOffset()" class="btn">ऑफसेट जोड़ें</button>
<script>
  function addOffset() {
    document.querySelector('p').style.outlineOffset = "8px";
  }
</script>
</body>
</html>

आउटपुट

"ऑफसेट जोड़ें" बटन पर क्लिक करने पर, काले आउटलाइन और सफेद बॉर्डर के बीच 8px का गैप बन जाता है।

आउटलाइन बनाम बॉर्डर

सामान्य उपयोग के मामले

• फोकस संकेतक: एक्सेसिबल फोकस रिंग के लिए outline-offset: 2px (बॉर्डर से स्पष्ट अलगाव)।
• हाइलाइट प्रभाव: तत्व को लेआउट बदले बिना हाइलाइट करना।
• नेगेटिव ऑफसेट: outline-offset: -4px आउटलाइन को बॉर्डर के अंदर खींचता है (आंतरिक हाइलाइट)।
• डीबगिंग: लेआउट बदले बिना तत्व सीमाओं की कल्पना करना।

संबंधित आउटलाइन प्रॉपर्टीज़

• outline - शॉर्टहैंड (चौड़ाई, स्टाइल, रंग)
• outlineWidth, outlineStyle, outlineColor