สไตล์เส้นขอบคุณสมบัติ สไตล์
ตัวอย่าง
เพิ่มเส้นขอบ "ทึบ" ให้กับ <div> องค์ประกอบ:
document.getElementById("myDiv").style.borderStyle = "solid";
ความหมายและการใช้งาน
ชุดคุณสมบัติ borderStyle หรือส่งคืนลักษณะของเส้นขอบขององค์ประกอบ
คุณสมบัตินี้สามารถรับค่าได้ตั้งแต่หนึ่งถึงสี่ค่า:
- หนึ่งค่า เช่น: p {border-style: solid} - เส้นขอบทั้งสี่จะเป็นทึบ
- สองค่าเช่น: p {border-style: solid dotted} - เส้นขอบด้านบนและด้านล่างจะเป็นสีทึบ เส้นขอบด้านซ้ายและด้านขวาจะเป็นจุด
- สามค่าเช่น: p {border-style: solid dotted double}- เส้นขอบด้านบนจะเป็นทึบ เส้นขอบด้านซ้ายและด้านขวาจะเป็นจุด เส้นขอบด้านล่างจะเป็นสองเท่า
- สี่ค่า เช่น: p {border-style: solid dotted double dashed} - เส้นขอบด้านบนจะเป็นทึบ เส้นขอบด้านขวาจะเป็นจุด เส้นขอบด้านล่างจะเป็นสองเท่า เส้นขอบด้านซ้ายจะเป็นเส้นประ
รองรับเบราว์เซอร์
Property | |||||
---|---|---|---|---|---|
borderStyle | Yes | Yes | Yes | Yes | Yes |
ไวยากรณ์
ส่งคืนคุณสมบัติ borderStyle:
object.style.borderStyle
ตั้งค่าคุณสมบัติ borderStyle:
object.style.borderStyle = value
มูลค่าทรัพย์สิน
Value | Description |
---|---|
none | Defines no border. This is default |
hidden | The same as "none", except in border conflict resolution for table elements |
dotted | Defines a dotted border |
dashed | Defines a dashed border |
solid | Defines a solid border |
double | Defines two borders. The width of the two borders are the same as the border-width value |
groove | Defines a 3D grooved border. The effect depends on the border-color value |
ridge | Defines a 3D ridged border. The effect depends on the border-color value |
inset | Defines a 3D inset border. The effect depends on the border-color value |
outset | Defines a 3D outset border. The effect depends on the border-color value |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about 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 Border
การอ้างอิง CSS: คุณสมบัติสไตล์เส้นขอบ
การอ้างอิง HTML DOM: คุณสมบัติเส้นขอบ
❮ สไตล์วัตถุ