js_獲取與設定css變數的值

Syinho發表於2024-04-01
JSCSS變數

透過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>

相關文章