CSS เปลี่ยนตัวแปรด้วย JavaScript
เปลี่ยนตัวแปรด้วย JavaScript
ตัวแปร CSS มีสิทธิ์เข้าถึง DOM ซึ่งหมายความว่าคุณสามารถเปลี่ยนได้ด้วย JavaScript
นี่คือตัวอย่างวิธีที่คุณสามารถสร้างสคริปต์เพื่อแสดงและเปลี่ยน --blue ตัวแปรจากตัวอย่างที่ใช้ในหน้าที่แล้ว สำหรับตอนนี้ ไม่ต้องกังวลถ้าคุณไม่คุ้นเคยกับ JavaScript คุณสามารถเรียนรู้เพิ่มเติมเกี่ยวกับ JavaScript ได้ใน บทช่วย สอน JavaScript ของเรา :
ตัวอย่าง
<script>
// Get the root element
var r = document.querySelector(':root');
// Create a function for getting a variable value
function
myFunction_get() {
// Get the styles (properties and values) for the
root
var rs = getComputedStyle(r);
// Alert the value of
the --blue variable
alert("The value of --blue is: " +
rs.getPropertyValue('--blue'));
}
// Create a function for setting a
variable value
function myFunction_set() {
// Set the value of
variable --blue to another value (in this case "lightblue")
r.style.setProperty('--blue', 'lightblue');
}
</script>
รองรับเบราว์เซอร์
ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับ
var()ฟังก์ชันนี้ อย่างเต็มที่
| Function | |||||
|---|---|---|---|---|---|
| var() | 49.0 | 15.0 | 31.0 | 9.1 | 36.0 |
CSS var() ฟังก์ชัน
| Property | Description |
|---|---|
| var() | Inserts the value of a CSS variable |