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

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

DOM style.outlineWidth प्रॉपर्टी किसी तत्व के आउटलाइन की चौड़ाई (मोटाई) को प्राप्त या सेट करती है। यह CSS outline-width प्रॉपर्टी के अनुरूप है।

सिंटैक्स

आउटलाइन चौड़ाई प्राप्त करना

object.style.outlineWidth

आउटलाइन चौड़ाई सेट करना

object.style.outlineWidth = "value"

मान

• लंबाई इकाइयाँ: px, em, rem, आदि।
• कीवर्ड: thin (आमतौर पर 1px), medium (आमतौर पर 3px, डिफ़ॉल्ट), thick (आमतौर पर 5px)।
• inherit, initial, unset।

उदाहरण

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

<!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 outlineWidth प्रॉपर्टी उदाहरण</h1>
<p></p>
<button onclick="addOutline()" class="btn">आउटलाइन जोड़ें</button>
<script>
  function addOutline() {
    document.querySelector('p').style.outlineWidth = "5px";
  }
</script>
</body>
</html>

आउटपुट

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

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

नोट्स

• आउटलाइन हमेशा आयताकार होती है (बॉर्डर-रेडियस का पालन नहीं करती)।
• outlineWidth सेट करने के लिए outlineStyle none नहीं होना चाहिए।
• आउटलाइन लेआउट को प्रभावित नहीं करती (कोई स्थान नहीं लेती)।
• रिटर्न किया गया मान स्ट्रिंग है (उदाहरण: "5px", "medium")।

एक्सेसिबिलिटी महत्व

कभी भी फोकस आउटलाइन को पूरी तरह से न हटाएं (outline-width: 0 या outline: none) जब तक कि आप एक कस्टम फोकस संकेतक (जैसे box-shadow: 0 0 0 3px blue) प्रदान न करें। फोकस संकेतक कीबोर्ड नेविगेशन उपयोगकर्ताओं के लिए आवश्यक हैं (WCAG 2.4.7)।

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

• फोकस रिंग मोटाई अनुकूलित करना (उदाहरण: outline-width: 3px + outline-offset: 2px)।
• हाइलाइट/चयन दृश्यता के लिए मोटी आउटलाइन।
• डीबगिंग: तत्व सीमाओं की कल्पना करना।