JS getPropertyValue获取CSS变量值为空？
问题情景：
定义好css变量后使用js获取修改css变量时发现在使用getPropertyValue方法无法取到css变量的值、为空，但是在setProperty后再getPropertyValue则能取到值。
`
<head>
<style>
:root {
--bg_color: green;
}
body {
background-color: var(--bg_color);
}
</style>
</head>
<body>
<script>
var mystyle = document.documentElement.style;
console.log('bgcolor=' + mystyle.getPropertyValue("--bg_color").trim());
setTimeout("changBgcolor()", 3000);
function changBgcolor() {
mystyle.setProperty("--bg_color", "red");
console.log('在setProperty后bgcolor=' + mystyle.getPropertyValue("--bg_color").trim());
}
</script>
</body>
`
输出结果是：
期待解答的问题：
为啥初次getPropertyValue无法取得css变量的值，而在setProperty后可以取得值？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
已解决。原因是CSS变量不是采用内联样式，而document.documentElement.style.getPropertyValue只能获取内联样式的值，所以get值为空。同样的document.documentElement.style.setProperty赋值操作是会作为内联样式添加的，所以此时再get便有值