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