在編寫JavaScript代碼的時候,經常需要對網頁中的CSS變量進行操作。那么,如何使用JavaScript來切換CSS變量呢?
// 首先,我們需要獲取CSS變量 const root = document.documentElement; const color = getComputedStyle(root).getPropertyValue('--primary-color'); // 然后,我們可以利用JavaScript來修改CSS變量 root.style.setProperty('--primary-color', '#fff'); // 最后,我們可以將修改后的CSS變量值應用到網頁中的元素上 const element = document.querySelector('.example-element'); element.style.backgroundColor = color;
在這個示例中,我們首先使用JavaScript獲取了網頁中的CSS變量。然后,我們通過修改CSS變量的值,在網頁中應用了新的顏色。最后,我們將新的顏色應用到一個示例元素上,以便查看它是否生效。
需要注意的是,為了支持舊的瀏覽器,可能需要使用-vendorprefix來獲取和設置CSS變量。
以上就是關于如何使用JavaScript切換CSS變量的簡單介紹。