java scriptでCSS変数（カスタムプロパティ）の値を取得＆変更する書き方
ここでは、java scriptからCSS変数（「カスケード変数のためのCSSカスタムプロパティ」）の値を 取得したり、変更したりするコードを紹介しています。
java scriptで
CSS変数の値を取得する書き方
java scriptからCSS変数の値を取得するには、
「getPropertyValue('--変数名')」を使います。
例として以下のCSSで、CSS変数の値を取得する書き方を見てみましょう。
:root{
--sample: pink;
}
.box{
background: var(--sample);
}
const SelectElement = document.querySelector('.box');
const SelectStyle = getComputedStyle(SelectElement);
const StyleValue = String(SelectStyle.getPropertyValue('--sample')).trim();
初見だとよく分からなかったので、以下に各コードの効果をメモしておきます。
java script「const」で上書きしない変数宣言
java script の変数宣言には「var」「let」「const」といった種類があります。
通常のvarで宣言した変数ではデータを上書きしたり変更できますが、constで宣言した変数は、一度入れたデータの変更（上書き、入れ替え）をしません。
どこかで意図しないデータに上書きされないように、ここではconstを使って変数を宣言しています。
java script「querySelector()」で要素を検出
「querySelector()」は、指定したHTML要素を探したり、取得する事ができます。
以前は検出・取得系メソッドといえば「getElementById()」や「getElementsByClassName()」が定番でしたが、それぞれID名専用、class名専用で、限られた対象にしか使えません。
「querySelector()」では、ID、class、HTMLタグなど、あらゆるHTML要素をこれ1つで検出・取得できるので、とても便利です。
ここではclass名「.box」を指定して、検出・取得しています。
java script「getComputedStyle()」でスタイル取得
「getComputedStyle()」は、指定の要素に対して、どんなスタイルが付与されているのかを検出、取得するメソッドです。
ここでは「.box」に指定されているスタイルを検出、取得しています。
疑似要素のスタイルを取得したい時は、引数を使って指定します。
.box::after{
content: '';
display: block;
background: skyblue;
height: 100px;
}
const SelectStyle = getComputedStyle(SelectElement , '::after');
java script「String()」「trim()」で文字列を整理
「String()」は文字列を扱うメソッドです。
「.trim();」で、対象文字列の前後の空白（スペース、タブ、改行など）を削除できます。
基本形式では「'スペースを含みそうな文字列'.trim();」という形式で使います。
ここではCSS変数「--sample」の値を取得した文字列から、余計な空白を削除しています。
java scriptで
CSS変数の値を変更する書き方
java scriptでCSS変数の値を変数したい時は、「setProperty('--変数名','値')」を使います。
こちらは1行でOK。
document.documentElement.style.setProperty('--sample','aliceblue');
第一引数でCSS変数を指定、第二引数で値を変更しています。
java scriptで
CSS変数の値を取得・変更するサンプルコード
実際に動くか確かめたい時は、以下のコードをHTMLファイルにコピペしてみてください。
取得コードの下にalert();を設置してあるので、ポップアップで取得された値を確認すると、どんな値を取得しているのか実感できると思います。
<div class="box">
サンプルテキスト
</div>
<style>
:root{
--sample: pink;
}
.box{
background: var(--sample);
}
</style>
<script>
<!--CSS変更の値を取得-->
const SelectElement = document.querySelector('.box');
const SelectStyle = getComputedStyle(SelectElement);
const StyleValue = String(SelectStyle.getPropertyValue('--sample')).trim();
<!--テスト用アラート-->
alert(SelectElement);
alert(SelectStyle);
alert(StyleValue);
<!--CSS変更の値を変更-->
document.documentElement.style.setProperty('--sample','skyblue');
</script>
java scriptが無効の場合は、サンプルテキストの背景色は「pink」ですが、うまく動作すると「skyblue」で表示されます。
java scriptから
CSS変数を扱う時つまづいた事
java scriptからCSS変数を扱うときには、書く順番にちょっと注意がいるかも。
CSSばかり触っていて久しぶりにjava scriptに触れると忘れがちなのですが、java scriptでは java scriptコードが書かれた時点で登場していない要素は取得できません。
CSS変更、取得できない……？という時は、java scriptコードを下の方においてみると動作するかも知れません。
CSS変数とjava scriptの合わせ技を使うと、ページの動的な変化も管理しやすくなります。
WEBページ制作に活用できそうですね！
