CSS ใช้ JavaScript แปลงตัวแปร

เปลี่ยนตัวแปรด้วย JavaScript

ตัวแปร CSS สามารถเข้าถึง DOM ซึ่งหมายความว่าคุณสามารถเปลี่ยนค่าของนั้นด้วย JavaScript

ตัวอย่างนี้ชี้แจงว่าจะเขียนโปรแกรมซึ่งแสดงและเปลี่ยนตัวแปร --blue ที่ใช้ในตัวอย่างที่ได้ใช้ไปแล้ว หากคุณไม่ค่อยเข้าใจ JavaScript ไม่ต้องกังวล คุณสามารถเรียนรู้ JavaScript มากขึ้นในหลักสูตร JavaScript ของเรา:

ตัวอย่าง

<script>
// ดึงองค์ประกอบเดิม
var r = document.querySelector(':root');
// สร้างฟังก์ชันเพื่อดึงค่าตัวแปร
function myFunction_get() {
  // ดึงรูปแบบ (คุณสมบัติและค่า) ของศูนย์
  var rs = getComputedStyle(r);
  // แจ้งค่าของตัวแปร --blue
  alert("ค่าของ --blue คือ: " + rs.getPropertyValue('--blue'));
}
// Create a function to set the value of the variable
function myFunction_set() {
  // Set the value of variable --blue to another value (in this case "lightblue")
  r.style.setProperty('--blue', 'lightblue');
}
</script>

ทดลองด้วยตัวเอง

การสนับสนุนโปรแกรมบราวเซอร์

ตัวเลขในตารางนี้บอกว่ารุ่นโปรแกรมบราวเซอร์แรกที่สนับสนุนคุณสมบัตินี้อย่างเต็มที่

ฟังก์ชัน
var() 49.0 15.0 31.0 9.1 36.0

CSS var() ฟังก์ชัน

ฟังก์ชัน บทความ
var() ใส่ค่าตัวแปร CSS