Javascriptでスタイルシート(CSS)を読み取ってみる。

はじめに

思いの他「知らなかった」という声をきいた内容。
Javascriptでcssの指定ができる。よく知られた内容だが、これをもっと使いやすくするコマンドがある。

getComputedStyle()。
これは、「特定の要素から、その要素に対していま現在適用されているCSSを計算＆取得する」というもの。
（現在の値を参照するので、たとえスタイルシートで指定されてない値であっても取得することができる。）

Javascriptでstyle.cssの中身を読み込んで現在の状態に合わせた挙動をさせる、なんて芸当が可能になれば、ウェブデザインの幅もぐんと広がるはずだ。

getComputedStyle()の用例

getComputedStyle()はCSSの値全てを一気に取得する関数である。
つまり欲しいCSSを知るためには、getComputedStyle()からさらに「getPropertyValue()」で絞り込みをかけてやる必要があるのだ。

で、以下が用例。

html

<style>
#prototype{
    color: #f9f9f9;
    width: 200px;
    background-color: #9898fd;
    padding: 1em;
}
</style>

<div id="prototype">div00</div>

<script type="text/javascript">
// 要素を取得
var element01 = document.getElementById('prototype');

// element01にかかるCSSを取得
var styles = window.getComputedStyle(element01, '');

var iro = styles.getPropertyValue('color'); // 文字色
console.log(iro);

var mleft = styles.getPropertyValue('margin-left'); // margin-left
console.log(mleft);

</script>

で、これをコンソールで見るとこうなる。

指定されていないmargin-leftであっても取得できているのがお分かりだろうか。いわゆるデフォルト値というやつだ。

豆知識

色系の単位はrgb、大きさや幅、長さの単位はすべてpxに統一されている。
emやvwや%でスタイルを指定していても、返ってくるのはすべてpxなのである。

また、返り値を見ればわかると思うが、返り値は数値だけでなく、その単位まで含まれた文字列で返される。
ってことは、先ほどのmargin-leftを数値として利用したいなら、

javascript

var mleft = styles.getPropertyValue('margin-left'); // margin-left

var mleft_math = Number( mleft.replace(/px/g , '') ); // 数値化

このようにひと手間加えてやる必要があることに注意しよう。

疑似要素でのgetComputedStyle()

疑似要素にかけられたスタイルであっても取得できる。
疑似要素の場合は以下のようにしてやろう。

html

<style>
#prototype{
    color: #f9f9f9;
    width: 200px;
    background-color: #9898fd;
    padding: 1em;
}

#prototype::before{
    display: block;
    content: 'free';

}
</style>

<div id="prototype">div00</div>

<script type="text/javascript">
// 要素を取得
var element01 = document.getElementById('prototype');

// element01のbeforeにかかるCSSを取得
var styles = window.getComputedStyle(element01, '::before');

var beforeFS = styles.getPropertyValue('display');
console.log(beforeFS);
</script>

別ブラウザでの挙動

とまあこんな具合に便利さを強調してみたgetComputedStyle()だが、欠点もある。
IEやIE、それからIEなど、このコマンドが通用しないブラウザが存在するのである。

それぞれを研究したわけではないが、おおむね以下の通りの対応。。。らしい。

古めのIE(11以前)

javascript

var element01 = document.getElementById('prototype');

// element01のbeforeにかかるCSSを取得
var styles = element01.currentStyle;

var iro = styles.getPropertyValue('color'); // 文字色
console.log(iro);

javascript

 var stylelists = window.getComputedStyle(element, null) || element.currentStyle || document.defaultView.getComputedStyle(element, '');

おまけ：縦横の幅

CSSはgetComputedStyle()でとれると書いたが、要素の縦幅、横幅については例外。
というのも、要素の縦幅、横幅を取得するコマンドはgetComputedStyle()とは別に存在するのである。

.clientWidth

paddingを含む横幅

.offsetWidth

border、padding、スクロールバーを含んだ横幅

.clientHeight

paddingを含む縦幅

.offsetHeight

border、padding、スクロールバーを含む縦幅

そのへんはこちらのサイト (https://ja.javascript.info/size-and-scroll) が詳しい。

参考文献

https://amachang.hatenablog.com/entry/20070611/1181554170
https://ja.javascript.info/size-and-scroll
https://qiita.com/amamamaou/items/bb79bec002a6ff033810