CSS var()ฟังก์ชัน
ตัวอย่าง
ขั้นแรก ประกาศตัวแปรส่วนกลางชื่อ "--main-bg-color" จากนั้นใช้ฟังก์ชัน var() เพื่อแทรกค่าของตัวแปรลงในสไตล์ชีตในภายหลัง:
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
ตัวอย่าง "ลองใช้เอง" เพิ่มเติมด้านล่าง
ความหมายและการใช้งาน
ฟังก์ชัน var() ใช้สำหรับใส่ค่าของตัวแปร CSS
| รุ่น: | CSS3 |
|---|
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับฟังก์ชันนี้อย่างเต็มที่
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
ไวยากรณ์ CSS
var(--name, value)
| Value | Description |
|---|---|
| name | Required. The variable name (must start with two dashes) |
| value | Optional. The fallback value (used if the variable is not found) |
ตัวอย่างเพิ่มเติม
ตัวอย่าง
อีกตัวอย่างหนึ่งที่ใช้ฟังก์ชัน var() เพื่อแทรกค่าตัวแปร CSS หลายค่า:
:root {
--main-bg-color: coral;
--main-txt-color: blue;
--main-padding: 15px;
}
#div1 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
#div2 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
หน้าที่เกี่ยวข้อง
กวดวิชา CSS: ตัวแปร CSS