以下のような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 で動作確認)