คุณสมบัติ borderBottomStyle ใช้สำหรับตั้งค่าหรือรับรูปแบบเส้น (line style) สำหรับขอบล่างขององค์ประกอบ
ไวยากรณ์ (Syntax)
object.style.borderBottomStyle = value
ค่าที่ใช้ได้ (Values)
| ลำดับ | ค่าและคำอธิบาย |
|---|---|
| 1 | none ค่าเริ่มต้น ไม่มีขอบ |
| 2 | hidden เหมือน "none" แต่ยังคงพื้นที่ขอบ โปร่งใสแต่ยังมีอยู่ |
| 3 | dotted ขอบแบบจุดๆ |
| 4 | dashed ขอบแบบขีด |
| 5 | solid ขอบแบบทึบ |
| 6 | double ขอบแบบคู่ |
| 7 | groove ขอบแบบ 3D groove ตรงข้ามกับ ridge |
| 8 | ridge ขอบแบบ 3D ridged ตรงข้ามกับ groove |
| 9 | inset ขอบแบบ 3D inset ดูเหมือนฝังอยู่ ผลตรงข้าม outset |
| 10 | outset ขอบแบบ 3D outset ดูเหมือน nổiขึ้น ผลตรงข้าม inset |
| 11 | initial ตั้งค่าคุณสมบัติให้เป็นค่าเริ่มต้น |
| 12 | inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบพาเรนต์ |
ตัวอย่าง (Example)
<!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>
ผลลัพธ์ (Output)
ผลลัพธ์ที่ได้:
เมื่อคลิกปุ่ม "Change Bottom Style":
