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

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

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

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

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

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

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

उदाहरण

<!DOCTYPE html> <html> <head> <style>    #P1 {       border-top: 4px solid magenta;       font-size: 1.5rem;    } </style> <script>    function changeBorderTop(){       document.getElementById("P1").style.borderTop="9px dashed red";       document.getElementById("Sample").innerHTML="पैराग्राफ तत्व के लिए ऊपरी बॉर्डर अब बदल गया है";    } </script> </head> <body>    <p id="P1">यह पैराग्राफ के अंदर कुछ नमूना टेक्स्ट है। यह इस नमूना टेक्स्ट की एक और पंक्ति है</p>    <p>नीचे दिए गए बटन पर क्लिक करके उपरोक्त पैराग्राफ के ऊपरी बॉर्डर प्रॉपर्टी बदलें</p>    <button onclick="changeBorderTop()">ऊपरी बॉर्डर बदलें</button>    <p id="Sample"></p> </body> </html>

आउटपुट

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

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

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

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

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

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

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

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