HTML DOM BorderLeft प्रॉपर्टी का उपयोग किसी तत्व के लिए लेफ्ट बॉर्डर प्रॉपर्टीज को प्राप्त करने या सेट करने के लिए शॉर्टहैंड के रूप में किया जाता है। बॉर्डरलेफ्ट प्रॉपर्टी में बॉर्डर-लेफ्ट-चौड़ाई, बॉर्डर-लेफ्ट-स्टाइल, बॉर्डर-लेफ्ट-कलर होता है।
−
. के लिए वाक्य रचना निम्नलिखित हैबॉर्डर इमेजविड्थ प्रॉपर्टी सेट करना -
object.style.borderLeft = "width style color|initial|inherit"
उपरोक्त गुणों को इस प्रकार समझाया गया है -
| पैरामीटर | <वें शैली ="पाठ-संरेखण:केंद्र;">विवरण|
|---|---|
| चौड़ाई | बाएं बॉर्डर की चौड़ाई सेट करने के लिए। |
| style | बाएं बॉर्डर स्टाइल सेट करने के लिए। |
| रंग | बाएं बॉर्डर का रंग सेट करने के लिए। |
| आरंभिक | इस गुण को डिफ़ॉल्ट मान पर सेट करने के लिए। |
| आरंभिक | इस गुण को डिफ़ॉल्ट मान पर सेट करने के लिए। |
| उत्तराधिकारी | पेरेंट प्रॉपर्टी वैल्यू इनहेरिट करने के लिए। |
आइए बॉर्डरलेफ्ट प्रॉपर्टी के लिए एक उदाहरण देखें -
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
#P1 {
border-left: 4px solid magenta;
font-size: 1.5rem;
}
</style>
<script>
function changeBorderLeft(){
document.getElementById("P1").style.borderLeft="9px dashed red";
document.getElementById("Sample").innerHTML="The left border for the paragraph element is now changed";
}
</script>
</head>
<body>
<p id="P1">This is some sample text inside the paragraph. Here is another line of this sample text</p>
<p>Change the above paragraph left border properties by clicking the below button</p>
<button onclick="changeBorderLeft()">Change Border Left</button>
<p id="Sample"></p>
</body>
</html> आउटपुट
“बॉर्डर लेफ्ट बदलें” . पर क्लिक करने पर बटन -
उपरोक्त उदाहरण में -
हमने सबसे पहले आईडी "पी1" के साथ एक पैराग्राफ बनाया है जिसमें इसके अंदर कुछ टेक्स्ट है और एक संबंधित सीएसएस शैली लागू है।
#P1 {
border-left: 4px solid magenta;
font-size: 1.5rem;
}
<p id="P1">This is some sample text inside the paragraph. Here is another line of this sample text</p> हमने तब एक बटन बनाया था “बॉर्डर लेफ्ट बदलें” जो उपयोगकर्ता द्वारा क्लिक किए जाने पर changeBorderLeft() फ़ंक्शन को निष्पादित करेगा।
<button onclick="changeBorderLeft()">Change Border Left</button>
चेंजबॉर्डर लेफ्ट () फ़ंक्शन getElementById () विधि का उपयोग करके आईडी "P1" के साथ पैराग्राफ तत्व की बॉर्डरलेफ्ट शैली की संपत्ति प्राप्त करता है और इसके गुण मान को '9px डैश्ड रेड' में बदल देता है। इस परिवर्तन को इंगित करने वाला एक संदेश तब पैराग्राफ में "नमूना" आईडी के साथ इसकी आंतरिक HTML संपत्ति का उपयोग करके प्रदर्शित किया जाता है।
function changeBorderLeft(){
document.getElementById("P1").style.borderLeft="9px dashed red";
document.getElementById("Sample").innerHTML="The left border for the paragraph element is now changed";
}