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

#はじめに

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

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

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


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

で、以下が用例。

```html: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>
```

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

![1582209003105.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416995/201b0ae7-bcde-fdb6-56cc-751777b4a17e.jpeg)


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


###豆知識

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

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

```javascript:javascript

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

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

```

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


#疑似要素での`getComputedStyle()`

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

```html: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>
```

![1582209662416.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416995/b5a1c29b-ffa2-106c-088e-1ce12f3ef67c.jpeg)


#別ブラウザでの挙動

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

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

###古めのIE(11以前)

```javascript:javascript

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

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

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

```

```javascript: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