js_获取与设置css变量的值

通过js获取设置的css变量的值

• 已经设置好的css的变量值

  • :root{
        --main-white:#fff;
    }
    .theme_light {
      --header-bg: var(--main-white);
    }
    

• 通过js获取已经设置好的css变量值

  • console.log(
     getComputedStyle(document.querySelector('.theme_light')).getPropertyValue('--header-bg')
    ) // #fff
    

通过js设置css变量

• 设置css变量

  • document.querySelector('.theme_light').style.setProperty('--main-grey', '#ccc')
    

  • <div id="mobileDefaultLayoutContainer" class="theme_light" style="height: 100vh; --main-grey: #ccc;"></div>