วิธีการ
getComputedStyle() คืนอ็อบเจกต์สไตล์ทั้งหมด getPropertyValue() ดึงค่าตัวแปร CSS setProperty() เปลี่ยนค่าตัวแปร CSS
ตัวอย่างที่ 1
<!DOCTYPE html> <html> <head> <style> :root { --outerColor: magenta; --innerColor: lightgreen; text-align: center; } div { margin: 5%; padding: 10%; background-color: var(--innerColor); border: 2px groove var(--outerColor); } </style> </head> <body> <div onmouseover="showColor()" onmouseout="changeColor()"> <p></p> </div> </body> <script> let ele = document.querySelector(':root'); let para = document.querySelector('p'); function showColor() { let cs = getComputedStyle(ele); para.textContent = ("Previously " + cs.getPropertyValue('--innerColor') + " color"); } function changeColor() { let item = document.querySelector('div'); item.style.setProperty('--innerColor', 'magenta') } </script> </html>
ผลลัพธ์: โชว์ค่าเดิม แล้วเปลี่ยนสีพื้นหลัง div เป็น magenta เมื่อ mouseout
ตัวอย่างที่ 2
<!DOCTYPE html> <html> <head> <style> :root { --customColor: seagreen; } div { margin: 5%; width: 130px; height: 130px; box-shadow: inset 0 0 38px var(--customColor); border-radius: 50%; } </style> </head> <body> <div onmouseover="toggle()"></div> </body> <script> let ele = document.querySelector(':root'); function toggle() { let cs = getComputedStyle(ele); let item = document.querySelector('div'); if(cs.getPropertyValue('--customColor') !== 'blue') { item.style.setProperty('--customColor', 'blue') } } </script> </html>
ผลลัพธ์: วงกลมเปลี่ยนเงาเป็นสีน้ำเงินเมื่อ hover
