borderBottomColor प्रॉपर्टी का उपयोग किसी तत्व के निचले बॉर्डर का रंग सेट या प्राप्त करने के लिए किया जाता है। इस प्रॉपर्टी के काम करने के लिए बॉर्डर-स्टाइल घोषित करना आवश्यक है क्योंकि तत्व में इस प्रॉपर्टी के काम करने के लिए एक बॉर्डर होना चाहिए।
सिंटैक्स
borderBottomColor प्रॉपर्टी सेट करने के लिए सिंटैक्स निम्नलिखित है:
object.style.borderBottomColor = "color|transparent|initial|inherit"
borderBottomColor प्रॉपर्टी लौटाने के लिए सिंटैक्स निम्नलिखित है:
object.style.borderBottomColor
मान
प्रॉपर्टी मानों को निम्नानुसार समझाया गया है:
| क्रमांक | मान एवं विवरण |
|---|---|
| 1 | color निचले बॉर्डर का रंग निर्दिष्ट करने के लिए। डिफ़ॉल्ट रंग काला है। |
| 2 | transparent निचले बॉर्डर को पारदर्शी बनाने के लिए यानी नीचे से सामग्री देखी जा सकती है। |
| 3 | Initial इस प्रॉपर्टी को उसके प्रारंभिक मान पर सेट करने के लिए। |
| 4 | Inherit पैरेंट प्रॉपर्टी मान को विरासत में लेने के लिए। |
उदाहरण
borderBottomColor प्रॉपर्टी का एक उदाहरण देखते हैं:
<!DOCTYPE html> <html> <head> <style> #IMG1 { border-bottom: 7px solid orange; box-shadow: 2px 2px 4px 1px seagreen; } </style> <script> function changeBorder(){ document.getElementById("IMG1").style.borderBottomColor="pink"; document.getElementById("Sample").innerHTML="The bottom border color for the image is now changed"; } </script> </head> <body> <h2>iOS Tutorial</h2> <img id="IMG1" src="https://www.tutorialspoint.com/ios/images/ios.jpg"> <p>Change the above image's below border...</p> <button onclick="changeBorder()">Change Bottom Border</button> <p id="Sample"></p> </body> </html>
आउटपुट
यह निम्नलिखित आउटपुट उत्पन्न करेगा:
"Change Bottom border" पर क्लिक करने पर:
