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

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

DOM style.outline प्रॉपर्टी किसी तत्व के आउटलाइन की चौड़ाई, स्टाइल, और रंग को एक साथ प्राप्त या सेट करने के लिए एक शॉर्टहैंड प्रॉपर्टी है। यह CSS outline शॉर्टहैंड प्रॉपर्टी के अनुरूप है।

सिंटैक्स

आउटलाइन प्राप्त करना

object.style.outline

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

object.style.outline = "width style color"

मान क्रम (कोई भी क्रम मान्य)

/* चौड़ाई स्टाइल रंग */
outline: 2px solid red;
outline: solid 2px red;
outline: red solid 2px;

/* व्यक्तिगत घटक वैकल्पिक हैं */
outline: solid red;      /* चौड़ाई डिफ़ॉल्ट (medium) */
outline: 3px dashed;     /* रंग डिफ़ॉल्ट (currentColor/invert) */

उदाहरण

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

<!DOCTYPE html>
<html>
<head>
<style>
  body { color: #000; background: lightblue; height: 100vh; }
  p {
    background-color: seagreen;
    height: 200px;
    width: 200px;
  }
  .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 outline प्रॉपर्टी उदाहरण</h1>
<p></p>
<button onclick="addOutline()" class="btn">आउटलाइन जोड़ें</button>
<script>
  function addOutline() {
    document.querySelector('p').style.outline = "2px solid #000";
  }
</script>
</body>
</html>

आउटपुट

"आउटलाइन जोड़ें" बटन पर क्लिक करने पर, हरे बॉक्स के चारों ओर 2px मोटी ठोस काली आउटलाइन दिखाई देती है।

सभी आउटलाइन प्रॉपर्टीज़

JS प्रॉपर्टी	CSS प्रॉपर्टी	नियंत्रित करता है
`outline`	`outline`	शॉर्टहैंड (चौड़ाई, स्टाइल, रंग)
`outlineWidth`	`outline-width`	मोटाई
`outlineStyle`	`outline-style`	रेखा प्रकार
`outlineColor`	`outline-color`	रंग
`outlineOffset`	`outline-offset`	तत्व से दूरी

आउटलाइन बनाम बॉर्डर (पुनर्कथन)

विशेषता	आउटलाइन	बॉर्डर
लेआउट स्थान	नहीं	हाँ
बॉक्स मॉडल	नहीं	हाँ
प्रति-पक्ष नियंत्रण	नहीं	हाँ
बॉर्डर-रेडियस	नहीं	हाँ
ऑफसेट	हाँ (`outline-offset`)	नहीं

एक्सेसिबिलिटी: फोकस संकेतक

कभी भी outline: none न हटाएं जब तक कि आप एक दृश्यमान विकल्प प्रदान न करें। ब्राउज़र डिफ़ॉल्ट फोकस आउटलाइन प्रदान करते हैं; उन्हें कस्टमाइज़ करें:

/* अनुशंसित: आउटलाइन + ऑफसेट */
:focus-visible {
  outline: 3px solid #0197F6;
  outline-offset: 2px;
}

/* विकल्प: बॉक्स-शैडो (गोल कोने, अधिक नियंत्रण) */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px #0197F6;
}

उपयोग के मामले

फोकस संकेतक (एक्सेसिबिलिटी के लिए महत्वपूर्ण)।
डीबगिंग: लेआउट बदले बिना तत्व सीमाओं की कल्पना करना।
चयन/हाइलाइट स्थिति (लेआउट शिफ्ट के बिना)।
त्रुटि स्थिति हाइलाइटिंग (लाल आउटलाइन)।