คุณสมบัติ borderBottomStyle ใช้สำหรับการตั้งค่าหรือรับลักษณะเส้นสำหรับเส้นขอบด้านล่างขององค์ประกอบ
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ borderBottomStyle
object.style.borderBottomStyle = value
คุณค่า
ค่าคุณสมบัติอธิบายได้ดังนี้ -
| ซีเนียร์ | คุณค่าและคำอธิบาย |
|---|---|
| 1 | ไม่มี นี่คือค่าเริ่มต้นและกำหนดไม่มีเส้นขอบ |
| 2 | ซ่อนอยู่ สิ่งนี้เหมือนกับ "ไม่มี" แต่จะยังคงใช้พื้นที่ชายแดน โดยทั่วไปจะโปร่งใส แต่ก็ยังอยู่ที่นั่น |
| 3 | จุด สิ่งนี้กำหนดเส้นขอบประ |
| 4 | พุ่ง สิ่งนี้กำหนดเส้นขอบประ |
| 5 | แข็ง สิ่งนี้กำหนดเส้นขอบทึบ |
| 6 | ดับเบิ้ล สิ่งนี้กำหนดเส้นขอบคู่ |
| 7 | ร่อง สิ่งนี้กำหนดเส้นขอบร่อง 3 มิติและตรงข้ามกับสันเขา |
| 8 | สันเขา กำหนดเส้นขอบแบบ 3 มิติและตรงข้ามกับร่อง |
| 9 | สิ่งที่ใส่เข้าไป สิ่งนี้กำหนดเส้นขอบที่ใส่เข้าไป 3 มิติและเอฟเฟกต์ดูเหมือนถูกฝังไว้ มันสร้างผลตรงกันข้ามของการเริ่มต้น |
| 10 | เริ่มต้น สิ่งนี้กำหนดเส้นขอบที่ใส่เข้าไป 3 มิติและเอฟเฟกต์ดูเหมือนเป็นลายนูน มันสร้างเอฟเฟกต์ที่ตรงกันข้ามกับสิ่งที่ใส่เข้าไป |
| 11 | เริ่มต้น สำหรับการตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
| 12 | สืบทอด เพื่อสืบทอดค่าคุณสมบัติหลัก |
ตัวอย่าง
ให้เราดูตัวอย่างสำหรับคุณสมบัติ borderBottomStyle -
<!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> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่ม "เปลี่ยนรูปแบบด้านล่าง" -
