ตัวอย่าง
เปลี่ยนสีของสี่พรมแดนของที่ <div> องค์ประกอบสีแดง:
document.getElementById("myDiv").style.borderColor = "red"; ลองตัวเอง» เพิ่มเติม "Try it Yourself" ตัวอย่างด้านล่าง
ความหมายและการใช้งาน
ชุดคุณสมบัติ borderColor หรือผลตอบแทนที่สีของเส้นขอบองค์ประกอบของ
คุณสมบัตินี้อาจใช้เวลา 1-4 ค่า:
- หนึ่งค่าเช่น: p {border-สี: สีแดง} - ทั้งสี่เส้นขอบจะเป็นสีแดง
- สองค่าเช่น: p {border-สี: สีแดงโปร่งใส} - บนและขอบด้านล่างจะเป็นสีแดงซ้ายและขอบด้านขวาจะโปร่งใส
- สามค่าเช่น: p {border-สี: สีฟ้าเรดี้กรีน} - ด้านบนชายแดนจะเป็นสีแดง, ซ้ายและขวาชายแดนจะเป็นสีเขียว, ขอบด้านล่างจะเป็นสีฟ้า
- สี่ค่าเช่น: p {border-สี: เรดี้กรีนสีฟ้าสีเหลือง} - เส้นขอบด้านบนจะเป็นสีแดง, เส้นขอบด้านขวาจะเป็นสีเขียว, ขอบด้านล่างจะเป็นสีฟ้าขอบด้านซ้ายจะเป็นสีเหลือง
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่สนับสนุนอย่างเต็มที่ทรัพย์สิน
| คุณสมบัติ | |||||
|---|---|---|---|---|---|
| borderColor | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
วากยสัมพันธ์
กลับ borderColor ทรัพย์สิน:
object .style.borderColor
ตั้ง borderColor ทรัพย์สิน:
object .style.borderColor=" ค่าทรัพย์สิน ความคุ้มค่า ลักษณะ color ระบุสีของเส้นขอบ ดู CSS ค่าสี สำหรับรายการที่สมบูรณ์ของค่าสีที่เป็นไปได้ สีเริ่มต้นเป็นสีดำ transparent สีของเส้นขอบมีความโปร่งใส (เนื้อหาพื้นฐานจะส่องผ่าน) initial ตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น อ่านเกี่ยวกับการเริ่มต้น inherit สืบทอดคุณสมบัตินี้จากองค์ประกอบหลักของมัน อ่านเกี่ยวกับการรับมรดก
รายละเอียดทางเทคนิค
ราคาเริ่มต้น: สีดำ กลับค่า: สตริงที่เป็นตัวแทนของสีของเส้นขอบองค์ประกอบของ CSS รุ่น CSS1
ตัวอย่างอื่น ๆ
ตัวอย่าง
เปลี่ยนสีของเส้นขอบด้านบนและด้านล่างเป็นสีเขียวและซ้ายและขวาชายแดนสีม่วงของ <div> องค์ประกอบ:
document.getElementById("myDiv").style.borderColor = "green purple";
ลองตัวเอง»
ตัวอย่าง
กลับสีเส้นขอบของ <div> องค์ประกอบ:
alert(document.getElementById("myDiv").style.borderColor); ลองตัวเอง»
หน้าเว็บที่เกี่ยวข้อง
กวดวิชา CSS: CSS ชายแดน
อ้างอิง CSS: border-color property
อ้างอิง HTML DOM: border property
<สไตล์วัตถุ