使用JavaScript获取和设置CSS变量？

本周我发现了CSS3变量的荣耀！爱他们

:root {
    --main-height: 45px;
    --main-gutter: -8px;

    --match-width: 180px;
    --player-width: 370px;
    --score-width: 60px;
}

---

我的问题。。。有没有办法在JavaScript中获取/设置这些变量？

您可能可以创建一个样式元素，并将其附加到包含任何CSS的

中

$("head").append(`
   <style type="text/css">
    CSS CODE
   </style>
`);

$（“头”）.append(`
CSS代码
`);

---

尽管如果您关心跨浏览器兼容性，可能还不应该使用CSS变量。

这里有一个正在运行的演示和下面的代码片段。详细信息在源代码中进行了注释

关键部分是：

及

//收集输入
const adjGrp=[].slice.call（document.querySelectorAll（“#调整输入”）；
//为更改事件的每个输入添加一个eventListener
adjGrp.forEach（input=>input.addEventListener（'change'，adjCSS））；
//事件处理程序使用CSS变量的setProperty方法和模板文本
//输入名称属性被引用到相应的CSS变量
函数adjCSS（e）{
document.documentElement.style.setProperty（`--${this.name}`，this.value+'px'）；
}

：根目录{
--缅因州：45像素；
--mainw:480px；
--匹配：180px；
--播放器：370px；
--评分：60px；
}
#主要{
字体：500 16px/1.5控制台；
高度：var（--mainh）；
宽度：var（--mainw）；
}
#记分牌{
显示：表格；
宽度：计算值（变量（--player）+150px）；
高度：计算（（变量（--main）*.2））；
利润率：15px 0 15px 20px；
}
传奇{
字体大小：1.6rem；
字体变体：小大写字母；
}
输出{
显示：表格单元格；
线高：1.5；
边框：3件镶灰色；
填充物：3px 5px；
}
#匹配{
宽度：var（--match）；
}
#玩家{
宽度：var（--player）；
}
#得分{
宽度：var（--分数）；
}
#调整{
利润率：0.20px；
}

记分牌
玩家
名称


匹配
0


分数
0
调整
玩家


匹配


分数

请注意IE可能不支持CSS3变量。不要害怕直说：IE不支持此功能。永远不会。