किसी तत्व के लिए शीर्ष सीमा गुण प्राप्त करने या सेट करने के लिए HTML DOM बॉर्डरटॉप प्रॉपर्टी का उपयोग शॉर्टहैंड के रूप में किया जाता है। बॉर्डरटॉप प्रॉपर्टी में बॉर्डर-टॉप-चौड़ाई, बॉर्डर-टॉप-स्टाइल, बॉर्डर-टॉप-कलर होता है।
−
. के लिए वाक्य रचना निम्नलिखित हैबॉर्डरटॉप प्रॉपर्टी सेट करना:
object.style.borderTop = "width style color|initial|inherit"
उपरोक्त गुणों को इस प्रकार समझाया गया है -
| पैरामीटर | <वें शैली ="पाठ-संरेखण:केंद्र;">विवरण|
|---|---|
| चौड़ाई | शीर्ष सीमा चौड़ाई निर्धारित करने के लिए। |
| शैली | शीर्ष सीमा शैली सेट करने के लिए। |
| रंग | टॉप बॉर्डर कलर सेट करने के लिए। |
| प्रारंभिक | इस गुण को डिफ़ॉल्ट मान पर सेट करने के लिए। |
| उत्तराधिकारी | मूल संपत्ति मूल्य को इनहेरिट करने के लिए। |
आइए बॉर्डरटॉप प्रॉपर्टी के लिए एक उदाहरण देखें -
उदाहरण
<!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="The Top border for the paragraph element is now changed ";
}
</script>
</head>
<body>
<p id="P1">This is some sample text inside the paragraph. Here is another line of this sample text</p>
<p>Change the above paragraph Top border properties by clicking the below button</p>
<button onclick="changeBorderTop()">Change Border Top</button>
<p id="Sample"></p>
</body>
</html> आउटपुट
“बॉर्डर टॉप बदलें” . पर क्लिक करने पर बटन -
उपरोक्त उदाहरण में -
हमने सबसे पहले आईडी "पी1" के साथ एक पैराग्राफ बनाया है जिसमें इसके अंदर कुछ टेक्स्ट है और एक संबंधित सीएसएस शैली लागू है।
#P1 {
border-Top: 4px solid magenta;
font-size: 1.5rem;
}
<p id="P1">This is some sample text inside the paragraph. Here is another line of this sample text</p> हमने तब एक बटन बनाया था “बॉर्डर टॉप बदलें” जो उपयोगकर्ता द्वारा क्लिक किए जाने पर चेंजबॉर्डरटॉप () फ़ंक्शन को निष्पादित करेगा।
<button onclick="changeBorderTop()">Change Border Top</button>
चेंजबॉर्डरटॉप () फ़ंक्शन getElementById () विधि का उपयोग करके आईडी "P1" के साथ पैराग्राफ तत्व की बॉर्डरटॉप स्टाइल प्रॉपर्टी प्राप्त करता है और इसके गुण मान को '9px डैश्ड रेड' में बदल देता है। इस परिवर्तन को इंगित करने वाला एक संदेश तब पैराग्राफ में "नमूना" आईडी के साथ इसकी आंतरिक HTML संपत्ति का उपयोग करके प्रदर्शित किया जाता है -
function changeBorderTop(){
document.getElementById("P1").style.borderTop="9px dashed red";
document.getElementById("Sample").innerHTML="The top border for the paragraph element is now changed";
}