java scriptでCSS変数(カスタムプロパティ)の値を取得&変更する書き方

ここでは、java scriptからCSS変数(「カスケード変数のためのCSSカスタムプロパティ」)の値を 取得したり、変更したりするコードを紹介しています。

\項目をタップするとジャンプできます/

java scriptで
CSS変数の値を取得する書き方

java scriptからCSS変数の値を取得するには、
「getPropertyValue('--変数名')」を使います。

例として以下のCSSで、CSS変数の値を取得する書き方を見てみましょう。

CSS

:root{
  --sample: pink;
}
.box{
  background: var(--sample);
}
js

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」に指定されているスタイルを検出、取得しています。

疑似要素のスタイルを取得したい時は、引数を使って指定します。

css

.box::after{
  content: '';
  display: block;
  background: skyblue;
  height: 100px;
}
js

const SelectStyle = getComputedStyle(SelectElement , '::after');

java script「String()」「trim()」で文字列を整理

「String()」は文字列を扱うメソッドです。

「.trim();」で、対象文字列の前後の空白(スペース、タブ、改行など)を削除できます。

基本形式では「'スペースを含みそうな文字列'.trim();」という形式で使います。

ここではCSS変数「--sample」の値を取得した文字列から、余計な空白を削除しています。

java scriptで
CSS変数の値を変更する書き方

java scriptでCSS変数の値を変数したい時は、「setProperty('--変数名','値')」を使います。

こちらは1行でOK。

js

document.documentElement.style.setProperty('--sample','aliceblue');

第一引数でCSS変数を指定、第二引数で値を変更しています。

java scriptで
CSS変数の値を取得・変更するサンプルコード

実際に動くか確かめたい時は、以下のコードをHTMLファイルにコピペしてみてください。

取得コードの下にalert();を設置してあるので、ポップアップで取得された値を確認すると、どんな値を取得しているのか実感できると思います。

HTML

<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ページ制作に活用できそうですね!