在项目中如何利用JS去修改CSS的属性值（二） --- :root+var()方法

一、介绍

关于在vue或nuxt项目中，利用JS去修改CSS样式方法有很多，比如：通过变量控制类名、通过变量控制style、通过JS去设置元素的style等等。但这些都是通过去修改元素的属性来修改，而不是去直接修改css样式表中的样式属性。
在最近写的一个项目中，引入了同事别的项目中封装的一个组件，我想要对其进行修改，使其能够根据传入的参数，显示不同的样式，例如颜色、大小。这样就能在不同的项目中进行复用。
之前我写过一篇博客，是通过 JS+Sass变量修改CSS的属性值的方式来实现的该需求，但在后续的测试过程中我发现，这个方式不兼容IE11及以下版本，但我所写的项目需要兼容IE11，所以我最终使用了:root{} + var() + css-vars-ponyfill的方法来解决该问题。

二、使用步骤

1、使用:root声明全局CSS变量

:root是一个css伪类，匹配页面的根元素html，而且权重大于html选择器的权重。通过它声明的CSS变量都是全局变量。

代码：

:root {
  /* CSS变量一定要以 -- 开头 */
  --selectedColor: #07C189
}
1
2
3
4

浏览器兼容性：

2、在CSS属性中使用var()方法使用声明的CSS变量

var()函数可以代替CSS中任何属性的值，但是该函数不能作为属性名、选择器或者其他除了属性值之外的值。var(a,b)函数有两个参数，第一个参数表示要使用的自定义属性的名称，第二个参数表示默认值，如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。

代码：

.selected-page {
  /* 使用前面声明好的CSS变量 */
  background: var(--selectedColor，#ccc);
}
1
2
3
4

浏览器兼容性：

3、引入 css-vars-ponyfill 依赖

该依赖是用来解决旧版本浏览器不支持CSS变量或var()的，只需在项目的控制台中执行npm i css-vars-ponyfill，将该依赖引入到项目中即可。
npm介绍：css-vars-ponyfill

4、使用JS修改CSS全局变量的值

// 3、接收父组件传递过来的属性值
  props: {
    selectedColor: {
      type: String,
      default: '#1e56d1'
    }
  }
  
// js 通过声明sass变量的key值，来找到对应变量，并修改其属性值
document.getElementsByTagName('body')[0].style.setProperty('--selectedColor', this.selectedColor)
1
2
3
4
5
6
7
8
9
10