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

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

DOM style.outlineStyle प्रॉपर्टी किसी तत्व के आउटलाइन की शैली (रेखा प्रकार) को प्राप्त या सेट करती है। यह CSS outline-style प्रॉपर्टी के अनुरूप है।

सिंटैक्स

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

object.style.outlineStyle

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

object.style.outlineStyle = "value"

मान

उदाहरण

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

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

आउटपुट

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

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

नोट्स

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

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

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