css变量获取和改变

不了解css变量的看大佬带你 了解CSS变量var

//获取css变量
let rootStyles = getComputedStyle(document.documentElement);
let varValue = rootStyles.getPropertyValue("--bgi").trim();
console.log(varValue,"初始背景图");

//改变已经定义的css变量
document.documentElement.style.setProperty("--bgi", "#f00");

改变背景图时的问题

正常添加字符串改变时没问题，但是图片路径直接写成字符串会出现编译问题（如下）

正常

错误

写法

document.documentElement.style.setProperty("--bgi", "url(../../assets/img/gm.jpg)");

编译

由此看出，路径编译问题

背景图正确引入方法

let bgi = "url(" + require("../../assets/img/gm1.jpg") + ")"
document.documentElement.style.setProperty("--bgi", bgi);

编译后

就可以正常切换了