HTML DOM BorderTopStyle प्रॉपर्टी का इस्तेमाल किसी एलीमेंट के लिए टॉप बॉर्डर स्टाइल को सेट करने या वापस करने के लिए किया जाता है।
−
. के लिए वाक्य रचना निम्नलिखित हैBorderTopStyle प्रॉपर्टी सेट करना -
object.style.borderTopStyle = value
उपरोक्त गुणों को इस प्रकार समझाया गया है -
| मान | <वें शैली ="पाठ-संरेखण:केंद्र;">विवरण|
|---|---|
| कोई नहीं | यह कोई सीमा निर्दिष्ट करने वाला डिफ़ॉल्ट मान है। |
| छिपा हुआ | यह "कोई नहीं" जैसा ही है, लेकिन फिर भी सीमा स्थान लेगा। यह मूल रूप से पारदर्शी है लेकिन फिर भी है। |
| बिंदीदार | यह डॉटेड बॉर्डर को परिभाषित करता है। |
| धराशायी | यह धराशायी बॉर्डर को परिभाषित करता है। |
| ठोस | यह एक ठोस बॉर्डर को परिभाषित करता है। |
| डबल | यह एक दोहरी सीमा को परिभाषित करता है |
| नाली | यह 3डी ग्रूव बॉर्डर को परिभाषित करता है और रिज के विपरीत है। |
| रिज | यह एक 3D लकीर वाली सीमा को परिभाषित करता है और खांचे के विपरीत है |
| इनसेट | यह एक 3D इनसेट बॉर्डर को परिभाषित करता है और प्रभाव ऐसा दिखता है जैसे यह उभरा हुआ हो। यह इनसेट का विपरीत प्रभाव पैदा करता है। |
| शुरुआत | यह एक 3D इनसेट बॉर्डर को परिभाषित करता है और प्रभाव ऐसा दिखता है जैसे यह उभरा हुआ हो। यह इनसेट का विपरीत प्रभाव पैदा करता है। |
| प्रारंभिक | इस गुण को प्रारंभिक मान पर सेट करने के लिए। |
| उत्तराधिकारी | मूल संपत्ति मूल्य प्राप्त करने के लिए |
आइए हम बॉर्डरटॉप स्टाइल प्रॉपर्टी माइनस के लिए एक उदाहरण देखें;
उदाहरण
<!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="The Top border style is now changed";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>Change the above div Top border style by clicking the below button</p>
<button onclick="changeTopStyle()">Change Top Style</button>
<p id="Sample"></p>
</body>
</html> आउटपुट
“शीर्ष शैली बदलें . पर क्लिक करने पर "बटन -
उपरोक्त उदाहरण में -
हमने पहले "DIV1" आईडी के साथ एक डिव बनाया है और इसकी आईडी के आधार पर एक सीएसएस शैली लागू करते हैं। शैली में सीमा-शीर्ष शैली और इसकी चौड़ाई मुख्य रूप से शामिल है -
#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()">Change Top Style</button>
changeTopStyle() विधि getElementById() का उपयोग करके आईडी "DIV1" के साथ div तत्व प्राप्त करती है और इसकी सीमा टॉप स्टाइल शैली संपत्ति को धराशायी करने के लिए सेट करती है। यह परिवर्तन तब दिए गए पाठ को उसकी आंतरिक HTML संपत्ति का उपयोग करके प्रदर्शित करके आईडी "नमूना" के साथ पैराग्राफ में परिलक्षित होता है।
function changeTopStyle(){
document.getElementById("DIV1").style.borderTopStyle="dashed";
document.getElementById("Sample").innerHTML="The Top border style is now changed";
}