คุณสมบัติ borderBottomWidth ใช้สำหรับตั้งค่าหรือรับความกว้างของขอบล่าง (bottom border) สำหรับองค์ประกอบ
ไวยากรณ์ (Syntax)
object.style.borderBottomWidth = "thin|medium|thick|length|initial|inherit"
ค่าที่ใช้ได้ (Values)
| ลำดับ | ค่าและคำอธิบาย |
|---|---|
| 1 | thin ระบุขอบบาง |
| 2 | medium ระบุขอบปานกลาง เป็นค่าเริ่มต้น |
| 3 | thick ระบุขอบหนา |
| 4 | length ระบุความกว้างขอบในหน่วยความยาว |
| 5 | initial ตั้งค่าคุณสมบัติให้เป็นค่าเริ่มต้น |
| 6 | inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบพาเรนต์ |
ตัวอย่าง (Example)
<!DOCTYPE html> <html> <head> <style>
#DIV1{
height: 100px;
width: 200px;
border: 10px groove orange;
padding: 10px;
border-bottom-width:30px;
}
</style>
<script>
function changeBottomWidth(){
document.getElementById("DIV1").style.borderBottomWidth="1px";
document.getElementById("Sample").innerHTML="The bottom border width is now decreased";
}
</script> </head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>Change the above div bottom border width by clicking the below button</p>
<button onclick="changeBottomWidth()">Change Bottom Width</button>
<p id="Sample"></p>
</body> </html>
ผลลัพธ์ (Output)
ผลลัพธ์ที่ได้:
เมื่อคลิกปุ่ม "Change Bottom Width":
