1

以下のようなcssがあったときにjsで:rootのカスタムプロパティ(変数)をすべて取得する方法はありませんか?

:root {
  --main-style__day__bg-color: #e0e0e0;
  --main-style__day__ft-color: #030303;
  --main-style__night__bg-color: #101010;
  --main-style__night__ft-color: #e0e0e0;

  --main-style__current__bg-color: var(--main-style__day__bg-color);
  --main-style__current__ft-color: var(--main-style__day__ft-color);
}

以下の方法ではだめでした。

document.documentElement.style.cssText //=> ""
window.getComputedStyle(document.documentElement).cssText.match(/--.*;/) //=> null

以下のように、一度jsでhtml tagのstyleに入れてあげれば取得できますが、そうではなく、どんなカスタムプロパティがあるかわからない状態でjsからすべてのカスタムプロパティを取得したいです。

document.documentElement.style.setProperty('--foo-bar', 'pink')
document.documentElement.style.setProperty('--piyo-piyo', 'blue')
document.documentElement.style.cssText //=> "--foo-bar:pink; --piyo-piyo:blue;"

(Chrome 70.0.3538.77 で動作確認)

1 件の回答 1

1

一番いい方法は以下のようにcomputedStyleMapを使う方法です。

// html要素の計算済みスタイルを取得
const htmlStyle = document.documentElement.computedStyleMap();
// スタイルのうちカスタムプロパティのみ表示
for (const [propertyName, value] of htmlStyle.entries()) {
    if (/^--/.test(propertyName)) {
        // valueはCSSStyleValueとして得られるので文字列に変換
        console.log(propertyName, value.toString());
    }
}

ただし、これは新しいAPIなのでまだGoogle Chromeでしか動きません。

代わりの方法としては、完璧ではありませんが以下のような方法があります。これは、文書中のCSSスタイルシート定義を全部取得して、その中から:rootに対して指定されているものを探すという力技な方法です。

// この文書のスタイルシートの一覧を取得
const sheets = document.styleSheets;
for (const sheet of sheets) {
    if (sheet.cssRules) {
        // 各スタイルシートのルールの中から :root がセレクタのものを探す
        for (const rule of sheet.cssRules) {
            if (rule.selectorText === ':root') {
                // :root がセレクタのルールの中身を列挙
                for (let i =0; i < rule.style.length; i++) {
                    const propertyName = rule.style.item(i);
                    // カスタムプロパティであるもののみ表示
                    if (/^--/.test(propertyName)) {
                        console.log(propertyName, rule.style.getPropertyValue(propertyName));
                    }
                }
            }
        }
    }
}

ご質問の例の場合は下のものでも動きますが、メディアクエリなどが関わってきた場合に下の例はうまく動かないかもしれません。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。