HTML DOM BorderStyle प्रॉपर्टी का उपयोग किसी तत्व के लिए बॉर्डर स्टाइल प्रॉपर्टीज प्राप्त करने या सेट करने के लिए शॉर्टहैंड के रूप में किया जाता है। इसमें एक से 4 मान निम्न प्रकार से लगते हैं -
-
यदि सभी 4 मान दिए गए हैं, तो यह दक्षिणावर्त दिशा में बॉर्डर-शैलियों को निर्दिष्ट करता है।
-
यदि केवल एक मान दिया जाता है तो सभी 4 बॉर्डर पर समान शैली लागू होती है।
-
यदि दो मान दिए गए हैं तो ऊपर और नीचे पहले मान पर सेट हैं और बाएँ और दाएँ दूसरे मान पर सेट हैं।
−
. के लिए वाक्य रचना निम्नलिखित हैबॉर्डर स्टाइल प्रॉपर्टी सेट करना:
object.style.borderLeftStyle = value
उपरोक्त गुणों को इस प्रकार समझाया गया है -
| मान | <वें शैली ="पाठ-संरेखण:केंद्र;">विवरण|
|---|---|
| कोई नहीं | यह कोई सीमा निर्दिष्ट करने वाला डिफ़ॉल्ट मान है। |
| छिपा हुआ | यह "कोई नहीं" जैसा ही है, लेकिन फिर भी सीमा स्थान लेगा। यह मूल रूप से पारदर्शी है लेकिन फिर भी है। |
| बिंदीदार | यह डॉटेड बॉर्डर को परिभाषित करता है। |
| धराशायी | यह धराशायी बॉर्डर को परिभाषित करता है। |
| ठोस | यह एक ठोस बॉर्डर को परिभाषित करता है। |
| डबल | यह एक दोहरी सीमा को परिभाषित करता है |
| नाली | यह 3डी ग्रूव बॉर्डर को परिभाषित करता है और रिज के विपरीत है। |
| रिज | यह एक 3D लकीर वाली सीमा को परिभाषित करता है और खांचे के विपरीत है |
| इनसेट | यह एक 3D इनसेट बॉर्डर को परिभाषित करता है और प्रभाव ऐसा लगता है जैसे यह एम्बेडेड है। यह शुरुआत के विपरीत प्रभाव पैदा करता है। |
| शुरुआत | यह एक 3D इनसेट बॉर्डर को परिभाषित करता है और प्रभाव ऐसा दिखता है जैसे यह उभरा हुआ हो। यह इनसेट का विपरीत प्रभाव पैदा करता है। |
| आरंभिक | इस गुण को प्रारंभिक मान पर सेट करने के लिए। |
| उत्तराधिकारी | मूल संपत्ति मूल्य प्राप्त करने के लिए |
आइए हम बॉर्डर स्टाइल संपत्ति के लिए एक उदाहरण देखें -
उदाहरण
<!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="The border style is now changed to dashed";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>Change the above div border style by clicking the below button</p>
<button onclick="changeBorderStyle()">Change Border Style</button>
<p id="Sample"></p>
</body>
</html> आउटपुट
“बॉर्डर स्टाइल बदलें” . पर क्लिक करने पर बटन -
