बॉर्डरबॉटम स्टाइल प्रॉपर्टी का इस्तेमाल किसी एलिमेंट के बॉटम बॉर्डर के लिए लाइन स्टाइल सेट करने या पाने के लिए किया जाता है।
सिंटैक्स
−
. के लिए वाक्य रचना निम्नलिखित हैबॉर्डरबॉटम स्टाइल प्रॉपर्टी सेट करना
object.style.borderBottomStyle = value
मान
संपत्ति के मूल्यों को इस प्रकार समझाया गया है -
<टेबल> <थेड>यह डिफ़ॉल्ट मान है और कोई सीमा निर्धारित नहीं करता है।
यह "कोई नहीं" जैसा ही है लेकिन फिर भी सीमा स्थान लेगा। यह मूल रूप से पारदर्शी है लेकिन फिर भी है।
यह एक बिंदीदार सीमा को परिभाषित करता है।
यह एक धराशायी सीमा को परिभाषित करता है।
यह एक ठोस सीमा को परिभाषित करता है।
यह दोहरी सीमा को परिभाषित करता है।
यह एक 3डी ग्रूव बॉर्डर को परिभाषित करता है और रिज के विपरीत है।
यह एक 3D लकीर वाली सीमा को परिभाषित करता है और खांचे के विपरीत है।
यह एक 3D इनसेट बॉर्डर को परिभाषित करता है और प्रभाव ऐसा लगता है जैसे यह एम्बेडेड है। यह शुरुआत के विपरीत प्रभाव पैदा करता है।
यह एक 3D इनसेट बॉर्डर को परिभाषित करता है और प्रभाव ऐसा दिखता है जैसे यह उभरा हुआ हो। यह इनसेट का विपरीत प्रभाव पैदा करता है।
इस संपत्ति को प्रारंभिक मूल्य पर सेट करने के लिए।
मूल संपत्ति मूल्य प्राप्त करने के लिए
उदाहरण
आइए हम बॉर्डरबॉटम स्टाइल प्रॉपर्टी के लिए एक उदाहरण देखें -
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
width:300px;
height:100px;
border-bottom: 8px solid dodgerblue;
border-bottom-style: groove;
}
</style>
<script>
function changeBottomStyle(){
document.getElementById("DIV1").style.borderBottomStyle="dashed";
document.getElementById("Sample").innerHTML="The bottom border style is now changed";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>Change the div bottom border style size by clicking the below button</p>
<button onclick="changeBottomStyle()">Change Bottom Style</button>
<p id="Sample"></p>
</body>
</html> आउटपुट
यह निम्नलिखित आउटपुट देगा -
"नीचे की शैली बदलें" बटन पर क्लिक करने पर -
