2019-04-23

【JS】CSS変数の全ての値を取得しJSオブジェクトに変換-1

こんにちは!今日はCSS変数の取得についてです。

任意のCSS変数の値を取得

はじめに任意の値を取得してみます。

こっちはCSS変数の名前が分かっていれば取得は簡単です:) 例えば富士山(3776m)の高さを取得する時は...

:root{
  --mount-fuji: 3776000mm;
}

const height = document.documentElement.style.getPropertyValue("--mount-fuji")

console.log(height) // 3776000mm

このようにシンプルに書けます。富士山の高さをミリで書くってなかなかないわね

なおCSS変数は基本的には:rootで宣言するため、今回のコードもそれを前提にしています。

複数のCSS変数の値を取得

では、複数のCSS変数を取得したい場合はどうでしょう?

:root{
  --mount-fuji: 3776000mm;
  --everest: 8848000mm; 
}

これを配列で取得すると...

const getCSSValues = keys =>
  keys.map(key =>
    document.documentElement.style.getPropertyValue(key))

const heightList = getCSSValues(['--mount-fuji', '--everest'])

console.dir(heightList)
// 3776000mm
// 8848000mm

できなくもないですが、変更に非常に弱い:( 変数を変更、追加する時に絶対ミスる。

「getPropertyAll」みたいなメソッドがあれば楽なんだけど...

全てのCSS変数の値を取得(getPropertyAll)

というわけでgetPropertyAllを1つの関数で作ってみました。

:root{
  --mount-fuji: 3776000mm;
  --everest: 8848000mm; 
}

const getPropertyAll = () =>
    [... document.styleSheets].reduce((pre, cur) =>
      pre
        || ([... cur.cssRules].some(sheet =>
          sheet.selectorText === ':root'
        )
          ? [... cur.cssRules].reduce((pre, cur) =>
              pre
                || (cur.selectorText === ':root'
                  ? cur.cssText.split(/:root\s*{|;|}/).reduce((pre, cur)　=>
                    cur.trim()
                      ? {
                          ... pre,
                          [cur.match(/.*?(?=:)/)[0].replace(/-/g, '_').trim()]:
                          cur.match(/(?<=:)(.*)/)[0].trim()
                        }
                      : pre
                  , {})
                  : pre)
            , null)
          : pre)
    , null)


console.dir(getPropertyAll())
// {
//  __mount_fuji: 3776000mm,
//  __everest: 8848000mm,
// }