code

HTML页面开发中，我们常常会设置很多样式和效果，写很多CSS样式。一般情况，对于像我这种对前端不熟的菜鸟，很多样式都是一点一点调出来，然后就放在css文件中。这样对于常做Java后端开发接受不了太多魔法值的人来说，总感觉css中给各种dom设置固定的尺寸、位置或距离等，心里很不舒服。

假设有这样一个场景，我们有两个dom（A和B），A的宽度为100px，B的宽度为500-A的宽度。在某个条件下，A的宽度要调整为120px，B仍为500-A的宽度。那么最笨的办法就是在js事件中先改变A的宽度后，接着再调整B的宽度，需要两步。

jquery 设置dom宽度

现在，我们有了CSS自定义属性，在css文件中这样定义自定义属性

css自定义属性声明

然后可以像变量一样使用

使用css自定义属性设置宽度

那么回到上面那个场景，我们只需要在js事件中改变自定义属性的值即可，如下图

js中改变css自定义属性

当然，以上只是一种场景，有了自定义属性可以解决很多问题，比如动态调整主题。感兴趣的同学可以研究研究。