要素に設定されているCSSスタイルをjavascriptで取得する方法を紹介します。
設定されている値を用いて何かしらの処理を実装したい場合等に、設定値を参照できるgetComputedStyle()が必要となります。
コード
.box {
width: 100px;
height: 100px;
background-color: blue;
}const box = document.querySelector(".box");
const boxStyle = getComputedStyle(box);
console.log(boxStyle.width); // 100px
console.log(boxStyle.width.replace("px", "")); // 100
console.log(boxStyle.backgroundColor); // rgb(0, 0, 255)
// こちらでもOK
console.log(boxStyle.getPropertyValue("width")); // 100pxgetComputedStyle()要素のすべてのCSSプロパティの値を含むオブジェクトを返す
注意点
getComputedStyle()を使用する上での個人的注意点をまとめました。
- read-onlyなので値を取得可能ですが変更は出来ない
- 単位も取得されるので値のみ使用したい場合は処理が必要
- 何らかの処理にて既にスタイルが上書きされている場合、変更後の値が取得される
- スタイルのプロパティ名はキャメルケースで指定する(例：background-colorはbackgroundColor)
デモ
See the Pen 要素に設定されているCSSスタイルをjavascriptで取得 by yoshi (@mikanbako) on CodePen.
