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

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

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

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

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

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

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

उदाहरण

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

आउटपुट

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

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

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

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

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

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

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

function changeBorderTop(){    document.getElementById("IMG1").style.borderTopColor="blue";    document.getElementById("Sample").innerHTML="बॉर्डर का ऊपरी रंग अब नीले रंग में बदल गया है"; }