CSS变量对JS交互组件开发带来的提升与变革示例代码详解
一、CSS变量带来的质变 CSS变量带来的提升绝不仅仅是节约点CSS代码,以及降低CSS开发和维护成本。 更重要的是,把组件中众多的交互开发从原来的JS转移到了CSS代码中,让组件代码更简洁,同时让视觉表现实现更加灵活了。 我们通过几个案例来说明这一变化。 二、简化了JS对DOM设置的介入 案例1:loading进度效果 例如实现下图所示的变量效果: 外面有一层背景层,然后里面有进度条,还有进度值。 在过去,会使用两层div元素,然后JS去改变里面有颜色条条的宽度,同时设置进度值。 也就是,loading的进度效果和进度值全部都是JS直接设置的,JS同时对应多个HTML信息。 现在,有了C
暂无评论