:root内の変数取得後のスタイル変更方法について

:root内の変数を取得したのちに、ボタンを押して背景色を変えたいのですが、
使用しているgetComputedStyle、getPropertyValueのどちらかが、
読み取り専用とどこかの記事に書いてあったので詰ってしまいました。

こちらの系統の手段で利用できそうなDOMってありますか？
ご教授いただけると幸いです。よろしくお願いいたします。

HTML
1<body>
2  <button class="button1" id="onbtn1" type="button"><tt>背景色変更１</tt></button>
3</body>

css
1:root{
2  --body-bgc:#000000;
3}
4body{
5  background-color: var(--body-bgc);
6}
7

javascipt
1document.getElementById('onbtn1').onclick = () => {
2  var color = getComputedStyle(document.documentElement).getPropertyValue('--body-bgc');
3  color.style.backgroundcolor = '#ffffff';
4}

行動規範の内容に同意します

回答1件

自己解決

以下に書き換えたところ解決できました。

javascript
1document.getElementById('onbtn1').onclick = () => {
2  //getComputedStyle(document.documentElement).getPropertyValue('--body-bgc');
3  //↑このコードは不要だった。
4  document.documentElement.style.setProperty('--body-bgc', '#ffffff');
5  }