在项目中如何利用JS去修改CSS的属性值 --- sass变量方法

一、简介

关于在vue或nuxt项目中，利用JS去修改CSS样式方法有很多，比如：通过变量控制类名、通过变量控制style、通过JS去设置元素的style等等。但这些都是通过去修改元素的属性来修改，而不是去直接修改css样式表中的样式属性。
在最近写的一个项目中，引入了同事别的项目中封装的一个组件，我想要对其进行修改，使其能够根据传入的参数，显示不同的样式，例如颜色、大小。这样就能在不同的需求中进行使用。经过各种尝试，最终选择通过JS直接修改sass中声明的样式变量的方法。

二、实际代码

<template>
  <div>
    ...
  </div>
</template>

<script>
export default {
  props: {
  // 3、接收父组件传递过来的属性值
    selectedColor: {
      type: String,
      default: '#1e56d1'
    }
  },
  data () {
    return {
      ...
    }
  },
  mounted () {
  // 4、通过原生JS修改声明的sass变量的值
  // 因为nuxt是服务端渲染，所以在 mounted 阶段在浏览器执行，存在document对象时才执行
  // vue则无此限制
  // js 通过声明sass变量的key值，来找到对应变量，并修改其属性值
    document.getElementsByTagName('body')[0].style.setProperty('--selectedColor', this.selectedColor)
  }
}
</script>

<style lang="scss">
/* 1、声明sass变量，并一定要利用 var(key,value) 的形式进行声明 
      前面是变量的key JS通过这个key 来修改对应变量的值 
      key 一定要以 -- 开头 */
$selectedColor: var(--selectedColor, "#1e56d1");
/* 2、在样式表中使用声明的变量 */
.selected-page {
  background: $selectedColor;
  color: #ffffff;
}
</style>

三、兼容性问题

在后续的使用该方法的过程中，发现了一个问题，那就是在css中通过 var 来声明变量的方式，不兼容IE11及以下版本。虽然现在IE毒瘤已经停止支持了，但是还是有相当一部分用户在使用ie浏览器，希望早日抛弃IE。
css中通过 var 来声明变量的浏览器支持度：

为了解决该问题，我使用了另外一种方法：在项目中如何利用JS去修改CSS的属性值（二） — :root+var()方法