การใช้ js ควบคุม css Variables (Custom Properties)

ก่อนอื่นเรามารู้จัก css variables คือ การสร้างตัวแปรใน css เพื่อใช้แทนค่าใน selector อื่นๆ ประโยชน์ก็คือสามารถเปลี่ยนข้อมูลในตัวแปลทีเดียว ก็จะเปลี่ยนทั้งหมด

เรามาดูตัวอย่างกันว่ามีประโยชน์อย่างไร

จากตัวอย่างเราจะสร้าง css variables โดยกำหนดให้ var1 สีดำ var2 สีแดง var3 สีฟ้า

:root{
  --var1:black;
  --var2:red;
  --var3:blue;
}

การนำเอาไปใช้ใน selector ต่างๆทำได้โดยใช้ var(ชื่อ custom properties)

.var1{
  background-color:var(--var1);
}
.var2{
  background-color:var(--var2);
}
.var3{
  background-color:var(--var3);
}

จะเห็นว่าถ้าเราเปลี่ยนค่าสี่ selector ที่ใช้ var ทั้งหมดที่ใช้ตัวแปลก็จะเปลี่ยนค่าสี background ตาม
ซึ่งสามารถทำให้เราทำทีสีเว็บไซต์ได้ง่ายมากขึ้นไม่ต้องทำแยก css ไฟล์แบบก่อน

ต่อไปจะเป็นการนำเอา js มาใช้เข้าถึงตัว var (custom properties)

ตัวอย่าง

เราจะเพิ่มตัว var จากตัวอย่างแรกชื่อว่า –mouse1
จากนั้นนำไปวางไว้ใน selector ทั้ง 3 อัน

.var1{
  background-color:var(--var1);
  margin-top:var(--mouse1);
}
.var2{
  background-color:var(--var2);
   margin-top:var(--mouse1);
}
.var3{
  background-color:var(--var3);
  margin-top:var(--mouse1);
}

และเพิ่ม js เพื่อควบคุมค่าตัวแปล

let root = document.documentElement;  
root.addEventListener("mousemove", e => {  //  add event mouse move 
root.style.setProperty('--mouse1', (e.clientY) + "px"); // ใช้แทนค่าตัวแปล css custom properties  --mouse1
});

รายชื่อ browser ที่ support custom properties ครับ

หวังว่าคงเป็นประโยชน์เพื่อประยุกค์ใช้ในการสร้างเว็บไซต์ครับ