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

HTML DOM borderLeftColor प्रॉपर्टी का उपयोग किसी तत्व के बाएं बॉर्डर के रंग को प्राप्त या सेट करने के लिए किया जाता है।

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

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

object.style.borderLeftColor = "color|transparent|initial|inherit"

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

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

उदाहरण

<!DOCTYPE html> <html> <head> <style>    #IMG1{       border-left:solid 8px;       border-left-color: orange;    } </style> <script>    function changeBorderLeft(){       document.getElementById("IMG1").style.borderLeftColor="lightgreen";       document.getElementById("Sample").innerHTML="बाएं बॉर्डर का रंग अब हरे रंग में बदल गया है";    } </script> </head> <body> <img id="IMG1" src="https://www.tutorialspoint.com/tensorflow/images/tensorflow-mini-logo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=550&w=150"> <p>नीचे दिए गए बटन पर क्लिक करके उपरोक्त छवि के बाएं बॉर्डर का रंग बदलें</p> <button onclick="changeBorderLeft()">बॉर्डर रंग बदलें</button> <p id="Sample"></p> </body> </html>

आउटपुट

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

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

हमने "IMG1" आईडी के साथ एक छवि तत्व बनाया है जिस पर एक CSS शैली लागू है। CSS शैली बाएं बॉर्डर की शैली और बाएं बॉर्डर के रंग को निर्दिष्ट करती है।

#IMG1 {    border-left:solid 8px;    border-left-color: orange; } <img id="IMG1" src=" https://www.tutorialspoint.com/tensorflow/images/tensorflow-mini-logo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=550&w=150">

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

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

changeBorderLeft() मेथड getElementById() मेथड का उपयोग करके "IMG1" आईडी के साथ <img> तत्व प्राप्त करता है और इसके borderLeftColor स्टाइल प्रॉपर्टी को lightgreen पर सेट करता है। यह बाएं बॉर्डर के रंग को lightgreen में बदल देता है और इस परिवर्तन को "Sample" आईडी वाले पैराग्राफ में इसके innerHTML प्रॉपर्टी का उपयोग करके प्रदर्शित करता है:

function changeBorderLeft(){    document.getElementById("IMG1").style.borderLeftColor="lightgreen";    document.getElementById("Sample").innerHTML="बाएं बॉर्डर का रंग अब हरे रंग में बदल गया है"; }