从js传属性到css文件中

如果你写大量的布局和适配方案，可能会想，可不可以把一个参数值传给css文件呢。
比如js内有多种渲染情况，如render一个list或者只是一个div可能是完全不同的布局。我们首先会想到可以判断一下类型并且用三元表达式复制给需要响应标签一个className。
这里我发现了一个更好的方法。

JavaScript 操作 CSS 变量的写法如下。

// 设置变量
document.body.style.setProperty('--type', 'one');

// 读取变量
document.body.style.getPropertyValue('--type').trim();
// 'one'

// 删除变量
document.body.style.removeProperty('--type');

这意味着，JavaScript 可以将任意值存入样式表。下面是一个监听事件的例子，事件信息被存入 CSS 变量。
这样我们就可以在css中 通过 var(–type) 拿到值one.
我们甚至可以这么写

.var(--length){
    //JS内类型1所对应的样式
  }

这就是一个响应式的雏形了，感觉发现了新大陆。