HTML DOM borderStyle प्रॉपर्टी का उपयोग किसी तत्व के लिए बॉर्डर शैली प्रॉपर्टी को प्राप्त या सेट करने के लिए एक शॉर्टहैंड के रूप में किया जाता है। यह निम्नलिखित तरीकों से 1 से 4 मान लेता है:
यदि सभी 4 मान दिए गए हैं तो यह बॉर्डर-शैली को घड़ी की दिशा में असाइन करता है।
यदि केवल एक मान दिया गया है तो वही शैली सभी 4 बॉर्डर पर लागू होती है।
यदि दो मान दिए गए हैं तो ऊपर और नीचे पहले मान पर सेट होते हैं और बाएं और दाएं दूसरे मान पर सेट होते हैं।
सिंटैक्स निम्नलिखित है:
borderStyle प्रॉपर्टी सेट करना:
object.style.borderStyle = value
उपरोक्त प्रॉपर्टी निम्नलिखित हैं:
| मान | विवरण |
|---|---|
| None | यह डिफ़ॉल्ट मान है जो बिना बॉर्डर को निर्दिष्ट करता है। |
| Hidden | यह "none" के समान है लेकिन फिर भी बॉर्डर स्थान लेगा। यह मूल रूप से पारदर्शी है लेकिन फिर भी मौजूद है। |
| Dotted | यह एक डॉटेड बॉर्डर को परिभाषित करता है। |
| Dashed | यह एक डैश्ड बॉर्डर को परिभाषित करता है। |
| Solid | यह एक सॉलिड बॉर्डर को परिभाषित करता है। |
| Double | यह एक डबल बॉर्डर को परिभाषित करता है। |
| Groove | यह एक 3D ग्रूव बॉर्डर को परिभाषित करता है और रिज के विपरीत है। |
| Ridge | यह एक 3D रिज्ड बॉर्डर को परिभाषित करता है और ग्रूव के विपरीत है। |
| Inset | यह एक 3D इनसेट बॉर्डर को परिभाषित करता है और प्रभाव ऐसा लगता है जैसे यह एम्बेडेड है। यह आउटसेट के विपरीत प्रभाव पैदा करता है। |
| Outset | यह एक 3D आउटसेट बॉर्डर को परिभाषित करता है और प्रभाव ऐसा लगता है जैसे यह उभरा हुआ है। यह इनसेट के विपरीत प्रभाव पैदा करता है। |
| Initial | इस प्रॉपर्टी को प्रारंभिक मान पर सेट करने के लिए। |
| Inherit | मूल तत्व के प्रॉपर्टी मान को विरासत में लेने के लिए। |
आइए borderStyle प्रॉपर्टी के लिए एक उदाहरण देखें:
उदाहरण
<!DOCTYPE html> <html> <head> <style> #DIV1{ width:300px; height:100px; border: 8px solid dodgerblue; border-style: groove; } </style> <script> function changeBorderStyle(){ document.getElementById("DIV1").style.borderStyle="dashed"; document.getElementById("Sample").innerHTML="बॉर्डर शैली अब डैश्ड में बदल गई है"; } </script> </head> <body> <div id="DIV1">SOME SAMPLE TEXT</div> <p>नीचे दिए गए बटन पर क्लिक करके उपरोक्त div की बॉर्डर शैली बदलें</p> <button onclick="changeBorderStyle()">बॉर्डर शैली बदलें</button> <p id="Sample"></p> </body> </html>आउटपुट
बॉर्डर शैली बदलें बटन पर क्लिक करने पर:
