ตัวอย่าง
เพิ่ม "solid" ชายแดนไปยัง <div> องค์ประกอบ:
document.getElementById("myDiv").style.borderStyle = "solid"; ลองตัวเอง» ความหมายและการใช้งาน
ชุดคุณสมบัติ BorderStyle หรือผลตอบแทนรูปแบบของชายแดนเป็นองค์ประกอบของ
คุณสมบัตินี้อาจใช้เวลา 1-4 ค่า:
- หนึ่งค่าเช่น: p {border-รูปแบบ: ของแข็ง} - ทั้งสี่เส้นขอบจะเป็นของแข็ง
- สองค่าเช่น: p {border-รูปแบบ: ของแข็งประ} - บนและขอบด้านล่างจะเป็นของแข็งซ้ายและขอบด้านขวาจะถูกจุด
- สามค่าเช่น: p {border-รูปแบบ: ของแข็งประคู่} - เส้นขอบด้านบนจะเป็นของแข็งซ้ายและขอบด้านขวาจะมีจุดที่เส้นขอบด้านล่างจะเป็นคู่
- สี่ค่าเช่น: p {border-รูปแบบ: ของแข็งประคู่ประ} - ด้านบนชายแดนจะเป็นของแข็งเส้นขอบด้านขวาจะมีจุดที่เส้นขอบด้านล่างจะมีคู่ชายแดนที่เหลือจะได้รับการประ
สนับสนุนเบราว์เซอร์
คุณสมบัติ BorderStyle รับการสนับสนุนในเบราว์เซอร์ที่สำคัญทั้งหมด
วากยสัมพันธ์
กลับคุณสมบัติ BorderStyle:
object .style.borderStyle
ตั้งค่าคุณสมบัติ BorderStyle:
object .style.borderStyle= ค่าทรัพย์สิน ความคุ้มค่า ลักษณะ none กำหนดไม่มีพรมแดน นี้จะเริ่มต้น hidden เช่นเดียวกับ "none" ยกเว้นในการแก้ไขความขัดแย้งชายแดนสำหรับองค์ประกอบของตาราง dotted กำหนดชายแดนประ dashed กำหนดชายแดนประ solid กำหนดเส้นขอบที่เป็นของแข็ง double กำหนดสองพรมแดน ความกว้างของทั้งสองเส้นขอบเป็นเช่นเดียวกับค่าชายแดนกว้าง groove กำหนดเส้นขอบ 3D ร่อง ผลขึ้นอยู่กับค่าขอบสี ridge กำหนดเส้นขอบยับ 3D ผลขึ้นอยู่กับค่าขอบสี inset กำหนดเส้นขอบภาพประกอบ 3 มิติ ผลขึ้นอยู่กับค่าขอบสี outset กำหนดเส้นขอบเริ่ม 3D ผลขึ้นอยู่กับค่าขอบสี initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก
รายละเอียดทางเทคนิค
ราคาเริ่มต้น: ไม่มี กลับค่า: สตริงที่เป็นตัวแทนของรูปแบบของชายแดนเป็นองค์ประกอบของ CSS รุ่น CSS1
ตัวอย่างอื่น ๆ
ตัวอย่าง
เปลี่ยนรูปแบบของสี่พรมแดนของที่ <div> องค์ประกอบ:
document.getElementById("myDiv").style.borderStyle = "dotted solid double
dashed";
ลองตัวเอง»
ตัวอย่าง
กลับสไตล์ชายแดนของ <div> องค์ประกอบ:
alert(document.getElementById("myDiv").style.borderStyle); ลองตัวเอง»
ตัวอย่าง
การสาธิตของค่าที่แตกต่างกัน:
var listValue = selectTag.options[selectTag.selectedIndex].text;
document.getElementById("myDiv").style.borderStyle = listValue; ลองตัวเอง»
หน้าเว็บที่เกี่ยวข้อง
กวดวิชา CSS: CSS ชายแดน
อ้างอิง CSS: border-style property
อ้างอิง HTML DOM: border property
<สไตล์วัตถุ