JavaScriptでstyleが取得できない場合はgetComputedStyleを使う

2021年7月31日

CSSファイルで適用されたスタイルは、JavaScriptから取得することができません。

例えば、#slide-wrapper に以下のようなスタイルが適用されているとします。

#slide-wrapper {
    position: absolute;
    display: flex;
    transition-duration: 0.5s;
    left: 0px;
}

この left を以下のようにJavaScriptから取得しようとしても空文字が返ります。

const slideWrapper = document.getElementById('slide-wrapper')
slideWrapper.style.left //空文字

getComputedStyle を使うことでCSSファイルで適用されたスタイルを取得可能です。

window.getComputedStyle(slideWrapper).left