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

メールアドレスが公開されることはありません。

関連記事

Web Security

JavaScript の alert は CPUにたいした負荷を掛けないしタブを閉じれば終了します

以下の話題について書きます。 不正プログラム書き込み疑い補導 03月04日 20時04分 クリックすると同じ画面が表示され、消えなくなる不正なプログラムのアドレスをインターネットの掲示板に書き込んだと …

JavaScript

Luminous を使ってみる

ウェブページ上の画像をポップアップ表示する JavaScript ライブラリである Luminous の使い方について説明します。

JavaScript

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

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

JavaScript

Yellow Fade の実装サンプル

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

JavaScript

Node.js のバージョン管理ツール nvm の使い方

目次1. nvm とは?2. nvm の導入1. すでに nvm がインストールされているかチェックする2. nvm をインストールします3. Node.js のインストール4. nvm の便利なコマ …