js变量如何赋值给css使⽤？
项⽬中，我们有时候会遇到组件的样式是动态变化的，这个时候就需要动态传变量，然后供css⽤，那么这个如何实现呢？
⽅法⼀：
使⽤原⽣js操作dom的⽅法，来改变css的样式，⽐如
这⾥的new style ⾥⾯就可以使⽤js传⼊的变量。
此⽅法固然可以，但是对应改变⼀些复杂的css，⽐如动画什么的，操作起来就不怎么⽅便了。此时，如下的⽅法⼆就显得尤为重要了！
⽅法⼆：
利⽤css变量来处理，思路是将js变量赋值给css变量，然后在css样式中使⽤css变量。如下图所⽰，我们传⼊year变量，然后⽣成了--top、--bottom等变量，然后这些变量就可以在css中使⽤！
其他：
JavaScript 操作 CSS 变量的写法如下。
// 设置变量
document.body.style.setProperty('--primary', '#7F583F');
// 读取变量
document.PropertyValue('--primary').trim();
// '#7F583F'
// 删除变量
document.veProperty('--primary');
style ⾥⾯直接申明css变量：
body {
-
-foo: #7F583F;
css变量}
.content {
--bar: #F7EFD2;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。