HTML DOM Style borderLeft प्रॉपर्टी

HTML DOM borderLeft प्रॉपर्टी का उपयोग किसी तत्व के लिए बाएं बॉर्डर प्रॉपर्टी को प्राप्त या सेट करने के लिए एक शॉर्टहैंड के रूप में किया जाता है। borderLeft प्रॉपर्टी में border-left-width, border-left-style, border-left-color शामिल हैं।

सिंटैक्स निम्नलिखित है:

borderLeft प्रॉपर्टी सेट करना:

object.style.borderLeft = "width style color|initial|inherit"

उपरोक्त प्रॉपर्टी निम्नलिखित हैं:

आइए borderLeft प्रॉपर्टी के लिए एक उदाहरण देखें:

उदाहरण

<!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="पैराग्राफ तत्व के लिए बाएं बॉर्डर अब बदल गया है";    } </script> </head> <body> <p id="P1">यह पैराग्राफ के अंदर कुछ नमूना टेक्स्ट है। यह इस नमूना टेक्स्ट की एक और पंक्ति है</p> <p>नीचे दिए गए बटन पर क्लिक करके उपरोक्त पैराग्राफ के बाएं बॉर्डर प्रॉपर्टी बदलें</p> <button onclick="changeBorderLeft()">बाएं बॉर्डर बदलें</button> <p id="Sample"></p> </body> </html>

आउटपुट

बाएं बॉर्डर बदलें बटन पर क्लिक करने पर:

उपरोक्त उदाहरण में:

हमने पहले "P1" आईडी के साथ एक पैराग्राफ बनाया है जिसमें उसके अंदर कुछ टेक्स्ट है और एक संबंधित CSS शैली लागू है।

#P1 {    border-left: 4px solid magenta;    font-size: 1.5rem; } <p id="P1">यह पैराग्राफ के अंदर कुछ नमूना टेक्स्ट है। यह इस नमूना टेक्स्ट की एक और पंक्ति है</p>

हमने फिर एक बटन बाएं बॉर्डर बदलें बनाया जो उपयोगकर्ता द्वारा क्लिक किए जाने पर changeBorderLeft() फ़ंक्शन को निष्पादित करेगा।

<button onclick="changeBorderLeft()">बाएं बॉर्डर बदलें</button>

changeBorderLeft() फ़ंक्शन getElementById() मेथड का उपयोग करके "P1" आईडी वाले पैराग्राफ तत्व के borderLeft स्टाइल प्रॉपर्टी को प्राप्त करता है और इसके प्रॉपर्टी मान को '9px dashed red' में बदल देता है। इस परिवर्तन को दर्शाने वाला एक संदेश फिर "Sample" आईडी वाले पैराग्राफ में इसके innerHTML प्रॉपर्टी का उपयोग करके प्रदर्शित किया जाता है।

function changeBorderLeft(){    document.getElementById("P1").style.borderLeft="9px dashed red";    document.getElementById("Sample").innerHTML="पैराग्राफ तत्व के लिए बाएं बॉर्डर अब बदल गया है"; }