HTML DOM borderWidth प्रॉपर्टी का उपयोग किसी तत्व के लिए बॉर्डर चौड़ाई प्रॉपर्टी को प्राप्त या सेट करने के लिए एक शॉर्टहैंड के रूप में किया जाता है। यह निम्नलिखित तरीकों से 1 से 4 मान लेता है:
यदि सभी 4 मान दिए गए हैं तो यह बॉर्डर-चौड़ाई को घड़ी की दिशा में असाइन करता है।
यदि केवल एक मान दिया गया है तो वही चौड़ाई सभी 4 बॉर्डर पर लागू होती है।
यदि दो मान दिए गए हैं तो ऊपर और नीचे पहले मान पर सेट होते हैं और बाएं और दाएं दूसरे मान पर सेट होते हैं।
सिंटैक्स निम्नलिखित है:
borderWidth प्रॉपर्टी सेट करना:
object.style.borderWidth = "thin|medium|thick|length|initial|inherit"
प्रॉपर्टी मान निम्नलिखित हैं:
| मान | विवरण |
|---|---|
| thin | बाएं बॉर्डर का रंग निर्दिष्ट करने के लिए। डिफ़ॉल्ट रंग काला पर सेट है। |
| medium | यह मध्यम बॉर्डर निर्दिष्ट करता है और यह डिफ़ॉल्ट मान है। |
| thick | यह एक मोटा बॉर्डर निर्दिष्ट करता है। |
| length | लंबाई इकाइयों में बॉर्डर चौड़ाई निर्दिष्ट करने के लिए उपयोग किया जाता है। |
| initial | इस प्रॉपर्टी को प्रारंभिक मान पर सेट करने के लिए। |
| inherit | मूल तत्व के प्रॉपर्टी मान को विरासत में लेने के लिए। |
आइए borderWidth प्रॉपर्टी के लिए एक उदाहरण देखें:
उदाहरण
<!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="बॉर्डर चौड़ाई अब घट गई है"; } </script> </head> <body> <div id="DIV1">SOME SAMPLE TEXT</div> <p>नीचे दिए गए बटन पर क्लिक करके उपरोक्त div बॉर्डर चौड़ाई बदलें</p> <button onclick="changeBorderWidth()">बॉर्डर चौड़ाई बदलें</button> <p id="Sample"></p> </body> </html>आउटपुट
बॉर्डर चौड़ाई बदलें बटन पर क्लिक करने पर:
