JavaScript

JavaScript からCSSカスタムプロパティを使用する(2パターン)

投稿日:

1. CSSカスタムプロパティ

CSSでは、CSSのプロパティ値を保持する変数(以下、CSS変数と呼びます)を定義して使用することができます。

定義するには、:root というセレクタに対して「CSS変数名 : 値」と記述します。

:root {
  --demo-color: blue;
}

これで、「blue」という値を保持した --demo-color というCSS変数が定義できました。

例えば、このCSS変数を demo クラスの color プロパティに適用するには、こう書きます。

.demo {
  color: var(--demo-color);
}

本記事では、このCSSカスタムプロパティを JavaScript から利用する2種類のパターンを紹介します。

2. JavaScriptを使って、定義済CSS変数の値を変更する

以下のように CSSの変数 --demo-color が定義されているとします。

:root {
  --demo-color: blue;
}

この --demo-color の値を変更するには、以下のような JavaScriptコードを記述します。

const root = document.querySelector(':root');
root.style.setProperty("--demo-color", 'red');

これで --demo-color の値が red になりました。

3. JavaScriptを使って、ある要素にCSS変数を指定する

以下のように CSS変数 --demo-color が定義されているとします。

:root {
  --demo-color: blue;
}

demoクラスの color プロパティに --demo-color を指定するには、以下のように記述します。

const root = document.querySelector(':root');
cost rootStyle = getComputedStyle(root);
const demo = document.querySelector('#demo');
demo.style.color = rootStyle.getPropertyValue('--demo-color');

4. デモページ

5. 参考

📂-JavaScript

執筆者:labo


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

JavaScript

【JavaScript】無名関数とアロー関数とイベントリスナーのthis

目次1. はじめに2. イベントリスナーの登録無名関数を使う場合アロー関数を使う場合3. まとめ4. 参考 1. はじめに あるHTMLにおいて、以下のようにボタンが存在しており、このボタンのクリック …

JavaScript

JSON.stringify() の引数に関する忘備録

JavaScript でよく使う JSON.stringify()メソッドですが、第二引数と第三引数の意味を忘れがちなので本ページに記録しておきます。

JavaScript

JavaScript による HTTP(S)リクエスト送信のいろいろな書き方

目次1. はじめに2. JSON を取得するコード(1) axios (XMLHttpRequest) (基本形)(2) axios (XMLHttpRequest) (async/await を使用 …

JavaScript

Yellow Fade の実装サンプル

JavaScript を使ったエフェクト処理の1つである Yellow Fade の実装サンプルを紹介します。

JavaScript

JavaScript の静的インポートと動的インポート

目次1. JavaScript の 2種類のインポート機能(概要)1. モジュール側2. 呼び出し側静的インポート動的インポート2. 静的インポート1. この機能の呼び名2. 特徴3. 仕様4. ブラ …