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

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

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

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

object.style.borderTopStyle = value

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

मान	विवरण
None	यह डिफ़ॉल्ट मान है जो बिना बॉर्डर को निर्दिष्ट करता है।
Hidden	यह "none" के समान है लेकिन फिर भी बॉर्डर स्थान लेगा। यह मूल रूप से पारदर्शी है लेकिन फिर भी मौजूद है।
Dotted	यह एक डॉटेड बॉर्डर को परिभाषित करता है।
Dashed	यह एक डैश्ड बॉर्डर को परिभाषित करता है।
Solid	यह एक सॉलिड बॉर्डर को परिभाषित करता है।
Double	यह एक डबल बॉर्डर को परिभाषित करता है।
Groove	यह एक 3D ग्रूव बॉर्डर को परिभाषित करता है और रिज के विपरीत है।
Ridge	यह एक 3D रिज्ड बॉर्डर को परिभाषित करता है और ग्रूव के विपरीत है।
Inset	यह एक 3D इनसेट बॉर्डर को परिभाषित करता है और प्रभाव ऐसा लगता है जैसे यह उभरा हुआ है। यह आउटसेट के विपरीत प्रभाव पैदा करता है।
outset	यह एक 3D आउटसेट बॉर्डर को परिभाषित करता है और प्रभाव ऐसा लगता है जैसे यह उभरा हुआ है। यह इनसेट के विपरीत प्रभाव पैदा करता है।
initial	इस प्रॉपर्टी को प्रारंभिक मान पर सेट करने के लिए।
inherit	मूल तत्व के प्रॉपर्टी मान को विरासत में लेने के लिए।

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

उदाहरण

<!DOCTYPE html> <html> <head> <style>    #DIV1{       width:300px;       height:100px;       border-top: 8px solid dodgerblue;       border-top-style: groove;    } </style> <script>    function changeTopStyle(){       document.getElementById("DIV1").style.borderTopStyle="dashed";       document.getElementById("Sample").innerHTML="ऊपरी बॉर्डर की शैली अब बदल गई है";    } </script> </head> <body>    <div id="DIV1">SOME SAMPLE TEXT</div>    <p>नीचे दिए गए बटन पर क्लिक करके उपरोक्त div के ऊपरी बॉर्डर की शैली बदलें</p>    <button onclick="changeTopStyle()">ऊपरी शैली बदलें</button>    <p id="Sample"></p> </body> </html>

आउटपुट

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

ऊपरी शैली बदलें बटन पर क्लिक करने पर:

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

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

हमने पहले "DIV1" आईडी के साथ एक div बनाया और उसकी आईडी के आधार पर उस पर एक CSS शैली लागू की। शैली में मुख्य रूप से बॉर्डर-टॉप शैली और इसकी चौड़ाई शामिल है:

#DIV1{    width:300px;    height:100px;    border-top: 8px solid dodgerblue;    border-top-style: groove; } <div id="DIV1">SOME SAMPLE TEXT</div>

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

<button onclick="changeTopStyle()">ऊपरी शैली बदलें</button>

changeTopStyle() मेथड getElementById() का उपयोग करके "DIV1" आईडी वाले div तत्व को प्राप्त करता है और इसके borderTopStyle स्टाइल प्रॉपर्टी को dashed पर सेट करता है। यह परिवर्तन फिर "Sample" आईडी वाले पैराग्राफ में दिए गए टेक्स्ट को प्रदर्शित करके इसके innerHTML प्रॉपर्टी का उपयोग करके प्रतिबिंबित होता है।

function changeTopStyle(){    document.getElementById("DIV1").style.borderTopStyle="dashed";    document.getElementById("Sample").innerHTML="ऊपरी बॉर्डर की शैली अब बदल गई है"; }