JavaScriptでCSS変数を操作する

JavaScriptでCSS変数（カスタムプロパティ）を操作する方法について説明します。CSS変数はJavaScriptから簡単に読み取ったり設定したりでき、値を動的に変えてスタイルを自由にコントロールできます。

本記事では、以下の項目に沿って解説します。

事前に必要な知識

CSS変数について理解しておく必要があります。

CSS変数の完全ガイド

純粋なJavaScript（一般的にVanilla JSと呼ばれます）を使えば、CSS変数にアクセスして設定する方法はいくつかあります。ここでは、最も簡単で広く使われている方法について解説します。

  1. window.getComputedStyle() 関数を使って、CSS変数の現在の値を取得します。
  2. document.querySelector() 関数を使って、CSS変数を設定する要素を選択します。
  3. element.style.setProperty() 関数を使って、CSS変数に値を設定します。

以下は詳しい説明を含む、手順ごとのサンプルコードです。

index.htmlの説明

  • 以下のコードは基本的なHTMLドキュメントです。
  • <link> タグを使って style.css ファイルを読み込みます。このファイルにはCSSコードが含まれています。
  • .target-element クラスを持つ <div> 要素と、「Change Styles」というボタンがあります。
  • script.js ファイルを読み込む <script> タグも含まれています。
HTML index.html 
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>JavaScriptでCSS変数を操作する</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="target-element">
            Hello, this is a text with dynamic styles!
        </div>
        
        <button type="button" id="changeStylesBtn">Change Styles</button>
        
        <script src="script.js"></script>
    </body>
</html>

style.cssの説明

  • :root セレクターの下に、--main-color と --font-size という2つのCSS変数を定義します。
  • .target-element クラスに var() 関数を使って、それらの変数を適用します。.target-element クラスのテキストは、--main-color に定義された色で、--font-size に定義されたサイズで表示されます。
CSS style.css 
:root {
    --main-color: blue;
    --font-size: 16px;
}
.target-element {
    color: var(--main-color);
    font-size: var(--font-size);
}

script.jsの説明

まず、以下のサンプルコードを確認した後で説明します。

JavaScript script.js 
// 1. CSS変数の現在の値を取得するために、window.getComputedStyle() 関数を使用します。
const rootStyles = window.getComputedStyle(document.documentElement);
const targetElement = document.querySelector('.target-element');

const mainColorValue = rootStyles.getPropertyValue('--main-color');
const fontSizeValue = rootStyles.getPropertyValue('--font-size');

console.log(mainColorValue); // 出力結果: "blue"
console.log(fontSizeValue); // 出力結果: "16px"

// 2. 「Change Styles」ボタンがクリックされたときに、CSS変数の値を変更してスタイルを動的に操作します。
document.getElementById('changeStylesBtn').addEventListener('click', () => {
    // 3. CSS変数の値を変更するために、element.style.setProperty() 関数を使用します。
    targetElement.style.setProperty('--main-color', 'red');
    targetElement.style.setProperty('--font-size', '20px');
});
  • window.getComputedStyle(document.documentElement) を使って、:root 要素のCSS変数の値を取得し、rootStyles変数に代入します。
  • document.querySelector('.target-element') を使って、.target-element クラスを持つ要素を選択し、それを targetElement 変数に代入します。
  • rootStyles.getPropertyValue('--main-color') を使って、--main-color 変数の現在の値を mainColorValue 変数に代入します。getPropertyValue() メソッドを使ってスタイルのプロパティ値を取得します。
  • rootStyles.getPropertyValue('--font-size') を使って、--font-size 変数の現在の値を fontSizeValue 変数に代入します。
  • コンソールに mainColorValue と fontSizeValue を出力すると、現在のCSS変数 --main-color の値が「blue」、--font-size の値が「16px」であることを確認できます。
  • 「Change Styles」ボタンをクリックすると、イベントリスナーが実行されます。
  • イベントリスナー内で targetElement.style.setProperty() 関数を使って、targetElement のCSS変数を変更します。
  • そのため、.target-element のテキストの色が赤色に、フォントサイズが20pxに変更されます。

このコードを実行すると、ページに「Hello, this is a text with dynamic styles!」というテキストと「Change Styles」ボタンが表示されます。「Change Styles」ボタンをクリックすると、テキストの色が赤色に、フォントサイズが20pxに変わることを確認できます。これにより、JavaScriptでCSS変数にアクセスして設定し、動的にスタイルを操作する方法を実践できます。

script.jsで使用した関数の参照

以下は、例示コードで使用したscript.js内の関連関数一覧です。クリックすると関連テーマのリンクに移動します。

HTML index.html 
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>JavaScriptでCSS変数を操作する</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="target-element">
            Hello, this is a text with dynamic styles!
        </div>
        
        <button id="changeStylesBtn">Change Styles</button>
        
        <!-- jQueryライブラリを読み込みます。 -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

上記のJavaScript（Vanilla JS、純粋なJavaScript）でCSS変数にアクセスし設定する方法の例を、jQueryを使ってCSS変数にアクセスし設定する方法として改めて説明します。

CSS変数の完全ガイド
CSS style.css 
:root {
    --main-color: blue;
    --font-size: 16px;
}
.target-element {
    color: var(--main-color);
    font-size: var(--font-size);
}
Javascript - JQuery 
// 1. CSS変数の現在の値を取得するために、window.getComputedStyle()の代わりにjQueryを使用します。
const mainColorValue = $(':root').css('--main-color');
const fontSizeValue = $(':root').css('--font-size');

console.log(mainColorValue); // 出力: "blue"
console.log(fontSizeValue); // 出力: "16px"

// 2. 「Change Styles」ボタンをクリックすると、CSS変数の値を変更してスタイルを動的に操作します。
$('#changeStylesBtn').on('click', () => {
    // 3. CSS変数の値を変更するためにjQueryを使用します。
    $('.target-element').css('--main-color', 'red');
    $('.target-element').css('--font-size', '20px');
});

jQueryコード（script.js）の説明

jQueryを使うと、JavaScriptよりも簡単に要素を選択し、スタイルを変更することができます。

  • :rootをセレクターとして使用し、jQueryでスタイルにアクセスします。
  • $('selector') の形式を使って要素を選択します。:root セレクターの代わりに、$('.target-element') を使い、.target-element クラスを持つ要素を選択します。
  • jQueryのcss()メソッドを使ってCSS変数の値を取得および設定します。css()メソッドを使用すると、setProperty()メソッドを使うよりも簡単にCSS変数を操作できます。

上記の例題コードを実行すると、初期状態ではコンソールに「blue」と「16px」が表示され、「Change Styles」ボタンをクリックすると、テキストの色が赤色に、フォントサイズが20pxに変わることが確認できます。このようにjQueryを使ってCSS変数にアクセスし設定することで、動的なスタイリングをより簡単に実装できます。

jQueryコードで使用した関数の参照

以下は、例題コードで使用したscript.js内の関連関数一覧です。クリックすると、jQueryの関連ドキュメントへリンクします。

参考資料

関連項目