CSS変数をJavaScriptで変更できるのか

Question

前提・実現したいこと

CSS変数を使用した値をJavaScriptで変更することができるのか

下記ソースコードの--border-percentをJavaScriptで変更することは可能でしょうか
jQueryは使いません.

該当のソースコード

<div class="pie"></div>

:root{
  --border-percent: 60%;
}
.pie{
  margin: auto;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-image: conic-gradient(red  0% var(--border-percent),#D9D9D9 var(--border-percent) 100%);
  -webkit-mask-image: radial-gradient(transparent 0%, transparent 50px,white 50px,white);
}

理想ではないコード

方法1

document.querySelector(".pie").style.backgroundImage = "conic-gradient(red  0% 30%,#D9D9D9 30% 100%)"

方法2

:root{
  --border-30-percent: 30%;
}

document.querySelector(".pie").style.backgroundImage = "conic-gradient(red  0% var(--border-30-percent),#D9D9D9 var(--border-30-percent) 100%)"

Answer 1

【CSS変数 JavaScript - Google 検索】
https://www.google.com/search?safe=off&q=CSS%E5%A4%89%E6%95%B0+JavaScript&oq=CSS%E5%A4%89%E6%95%B0

【CSSStyleDeclaration.setProperty() - Web APIs | MDN】
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

Comments

[sk-sora--ypi]

ありがとうございます、`setProperty`が存在したのですね。
助かりました。