สไตล์เส้นขอบคุณสมบัติ สี
ตัวอย่าง
เปลี่ยนสีของเส้นขอบทั้งสี่ของ <div> องค์ประกอบเป็นสีแดง:
document.getElementById("myDiv").style.borderColor = "red";
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
คุณสมบัติ borderColor ตั้งค่าหรือคืนค่าสีของเส้นขอบขององค์ประกอบ
คุณสมบัตินี้สามารถรับค่าได้ตั้งแต่หนึ่งถึงสี่ค่า:
- หนึ่งค่า เช่น: p {border-color: red} - ทั้งสี่เส้นขอบจะเป็นสีแดง
- สองค่า เช่น p {border-color: red transparent} - ขอบบนและล่างจะเป็นสีแดง ขอบซ้ายและขวาจะโปร่งใส
- ค่าสามค่า เช่น p {border-color: red green blue}- ขอบบนจะเป็นสีแดง ขอบซ้ายและขวาจะเป็นสีเขียว ขอบล่างจะเป็นสีน้ำเงิน
- สี่ค่า เช่น p {border-color: red green blue yellow} - ขอบด้านบนจะเป็นสีแดง ขอบด้านขวาจะเป็นสีเขียว ขอบด้านล่างจะเป็นสีน้ำเงิน ขอบด้านซ้ายจะเป็นสีเหลือง
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่สนับสนุนคุณสมบัติอย่างสมบูรณ์
Property | |||||
---|---|---|---|---|---|
borderColor | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
ไวยากรณ์
ส่งคืนคุณสมบัติ borderColor:
object.style.borderColor
ตั้งค่าคุณสมบัติ borderColor:
object.style.borderColor = "color|transparent|initial|inherit"
มูลค่าทรัพย์สิน
Value | Description |
---|---|
color | Specifies the color of the border. Look at CSS Color Values for a complete list of possible color values. Default color is the current color of the element |
transparent | The color of the border is transparent (underlying content will shine through) |
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.borderColor = "green purple";
ตัวอย่าง
กลับสีเส้นขอบของ <div> องค์ประกอบ:
alert(document.getElementById("myDiv").style.borderColor);
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: CSS Border
การอ้างอิง CSS: คุณสมบัติ border-color
การอ้างอิง HTML DOM: คุณสมบัติเส้นขอบ