एचटीएमएल डोम स्टाइल बॉर्डरविड्थ संपत्ति

<घंटा/>

किसी तत्व के लिए बॉर्डर चौड़ाई गुण प्राप्त करने या सेट करने के लिए HTML DOM BorderWidth प्रॉपर्टी का उपयोग शॉर्टहैंड के रूप में किया जाता है। इसमें एक से 4 मान निम्न प्रकार से लगते हैं -

यदि सभी 4 मान दिए गए हैं तो यह दक्षिणावर्त दिशा में सीमा-चौड़ाई निर्दिष्ट करता है।
यदि केवल एक मान दिया जाता है तो सभी 4 सीमाओं पर समान चौड़ाई लागू होती है।
यदि दो मान दिए गए हैं तो ऊपर और नीचे पहले मान पर सेट हैं और बाएँ और दाएँ दूसरे मान पर सेट हैं।
−
. के लिए वाक्य रचना निम्नलिखित है

बॉर्डरविड्थ संपत्ति सेट करना:

object.style.borderWidth = "thin|medium|thick|length|initial|inherit"

संपत्ति के मूल्यों को इस प्रकार समझाया गया है -

<वें शैली ="पाठ-संरेखण:केंद्र;">विवरण

मान
पतला	बाएं बॉर्डर रंग निर्दिष्ट करने के लिए। डिफ़ॉल्ट रंग काला पर सेट है
मध्यम	यह मध्यम सीमा निर्दिष्ट करता है और डिफ़ॉल्ट मान है।
मोटा	यह एक पतली सीमा निर्दिष्ट करता है।
लंबाई	इसका उपयोग लंबाई इकाइयों में सीमा चौड़ाई निर्दिष्ट करने के लिए किया जाता है।
प्रारंभिक	इस गुण को प्रारंभिक मान पर सेट करने के लिए।
उत्तराधिकारी	मूल संपत्ति मूल्य प्राप्त करने के लिए

आइए बॉर्डरविड्थ प्रॉपर्टी के लिए एक उदाहरण देखें -

उदाहरण

<!DOCTYPE html>
<html>
<head>
<style>
   #DIV1{
      height: 100px;
      width: 200px;
      border: 10px groove orange;
      padding: 10px;
      border-width:30px;
   }
</style>
<script>
   function changeBorderWidth(){
      document.getElementById("DIV1").style.borderWidth="5px";
      document.getElementById("Sample").innerHTML="The border width is now decreased";
   }
</script>
</head>
<body>
   <div id="DIV1">SOME SAMPLE TEXT</div>
   <p>Change the above div border width by clicking the below button</p>
   <button onclick="changeBorderWidth()">Change Border Width</button>
   <p id="Sample"></p>
</body>
</html>

आउटपुट

एचटीएमएल डोम स्टाइल बॉर्डरविड्थ संपत्ति

“बॉर्डर की चौड़ाई बदलें . पर क्लिक करने पर "बटन -

एचटीएमएल डोम स्टाइल बॉर्डरविड्थ संपत्ति