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

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

DOM style.outlineColor प्रॉपर्टी किसी तत्व के आउटलाइन के रंग को प्राप्त या सेट करती है। यह CSS outline-color प्रॉपर्टी के अनुरूप है।

सिंटैक्स

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

object.style.outlineColor

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

object.style.outlineColor = "color"

रंग मान

नामित रंग: red, blue, seagreen, आदि।
हेक्स: #ff0000, #f00।
RGB/RGBA: rgb(255,0,0), rgba(255,0,0,0.5)।
HSL/HSLA: hsl(0,100%,50%)।
invert - पृष्ठभूमि रंग का उलटा (डिफ़ॉल्ट, फोकस रिंग के लिए अच्छा कंट्रास्ट सुनिश्चित करता है)।
currentColor - तत्व के color मान का उपयोग करता है।
inherit, initial, unset।

उदाहरण

यह उदाहरण एक हरे बॉक्स के आउटलाइन रंग को लाल (#db133a) में बदलता है:

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

आउटपुट

"आउटलाइन जोड़ें" बटन पर क्लिक करने पर, हरे बॉक्स के चारों ओर काली आउटलाइन लाल (#db133a) हो जाती है।

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

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

विशेष मान: invert

outline-color: invert (डिफ़ॉल्ट) ब्राउज़र को पृष्ठभूमि के विपरीत रंग की गणना करने का निर्देश देता है, जिससे फोकस संकेतक हमेशा दृश्यमान रहता है। यह एक्सेसिबिलिटी के लिए उत्कृष्ट है।

नोट्स

आउटलाइन हमेशा आयताकार होती है (बॉर्डर-रेडियस का पालन नहीं करती)।
outlineColor सेट करने के लिए outlineStyle none नहीं होना चाहिए।
आउटलाइन लेआउट को प्रभावित नहीं करती (कोई स्थान नहीं लेती)।

एक्सेसिबिलिटी सर्वोत्तम अभ्यास

/* अच्छा: कस्टम फोकस रिंग आउटलाइन के बजाय */
:focus {
  outline: none;
  box-shadow: 0 0 0 3px #0197F6; /* सुसंगत, गोल कोने, ऑफसेट नियंत्रण */
}

/* या आउटलाइन का उपयोग करते हुए: */
:focus {
  outline: 3px solid #0197F6;
  outline-offset: 2px;
}