คุณสมบัติ HTML DOM borderStyle ใช้เป็นชวเลขสำหรับรับหรือตั้งค่าคุณสมบัติสไตล์เส้นขอบสำหรับองค์ประกอบ ใช้ค่าตั้งแต่ 1 ถึง 4 ค่าด้วยวิธีต่อไปนี้ −
-
มันกำหนดรูปแบบเส้นขอบในทิศทางตามเข็มนาฬิกาหากได้รับทั้ง 4 ค่า
-
หากระบุเพียงค่าเดียว ระบบจะใช้รูปแบบเดียวกันกับเส้นขอบทั้ง 4 แบบ
-
หากได้รับค่าสองค่า ค่าบนและค่าล่างจะถูกตั้งค่าเป็นค่าแรก และค่าซ้ายและขวาจะถูกตั้งค่าเป็นค่าที่สอง
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ borderStyle:
object.style.borderLeftStyle = value
อธิบายคุณสมบัติข้างต้นดังนี้ −
| ค่า | คำอธิบาย |
|---|---|
| ไม่มี | เป็นค่าเริ่มต้นที่ระบุไม่มีเส้นขอบ |
| ซ่อนอยู่ | สิ่งนี้เหมือนกับ "ไม่มี" แต่จะยังคงใช้พื้นที่ชายแดน โดยทั่วไปจะโปร่งใส แต่ก็ยังอยู่ที่นั่น |
| จุด | สิ่งนี้กำหนดเส้นขอบประ |
| ประชด | กำหนดเส้นประ |
| แข็ง | สิ่งนี้กำหนดเส้นขอบทึบ |
| ดับเบิ้ล | สิ่งนี้กำหนดเส้นขอบคู่ |
| ร่อง | สิ่งนี้กำหนดเส้นขอบของร่อง 3 มิติและอยู่ตรงข้ามกับสันเขา |
| ริดจ์ | สิ่งนี้กำหนดเส้นขอบแบบ 3 มิติและตรงข้ามกับร่อง |
| สิ่งที่ใส่เข้าไป | สิ่งนี้กำหนดเส้นขอบที่ใส่เข้าไป 3 มิติและเอฟเฟกต์ดูเหมือนถูกฝังไว้ มันสร้างผลตรงกันข้ามของการเริ่มต้น |
| เริ่มต้น | สิ่งนี้กำหนดเส้นขอบที่ใส่เข้าไป 3 มิติและเอฟเฟกต์ดูเหมือนเป็นลายนูน มันสร้างเอฟเฟกต์ที่ตรงกันข้ามกับสิ่งที่ใส่เข้าไป |
| เริ่มต้น | สำหรับการตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
| สืบทอด | การสืบทอดค่าคุณสมบัติหลัก |
ให้เราดูตัวอย่างสำหรับคุณสมบัติ borderStyle -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
#DIV1{
width:300px;
height:100px;
border: 8px solid dodgerblue;
border-style: groove;
}
</style>
<script>
function changeBorderStyle(){
document.getElementById("DIV1").style.borderStyle="dashed";
document.getElementById("Sample").innerHTML="The border style is now changed to dashed";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>Change the above div border style by clicking the below button</p>
<button onclick="changeBorderStyle()">Change Border Style</button>
<p id="Sample"></p>
</body>
</html> ผลลัพธ์
เมื่อคลิกที่ “เปลี่ยนรูปแบบเส้นขอบ” ปุ่ม −
