JavaScript getComputedStyle(): 要素の計算済みスタイルを取得する

概要: このチュートリアルでは、JavaScript の getComputedStyle() メソッドを使用して、要素の計算済み CSS プロパティを取得する方法を学習します。

JavaScript getComputedStyle() メソッドの概要

getComputedStyle() は window オブジェクトのメソッドであり、要素の計算済みスタイルを含むオブジェクトを返します。

let style = window.getComputedStyle(element [,pseudoElement]);Code language: JavaScript (javascript)

getComputedStyle() メソッドは2つの引数を受け取ります。

element は、計算済みスタイルを取得する対象の要素です。テキストノードなど、別のノードタイプを渡すと、メソッドはエラーをスローします。
pseudoElement は、一致させる疑似要素を指定します。デフォルトは null です。

たとえば、ホバー状態のリンクのすべての CSS プロパティの計算値を取得する場合、getComputedStyle() メソッドに次の引数を渡すことができます。

let link = document.querySelector('a');
let style = getComputedStyle(link,':hover');
console.log(style);Code language: JavaScript (javascript)

window はグローバルオブジェクトであるため、getComputedStyle() メソッドを呼び出す際に省略できます。

getComputedStyle() メソッドは、CSSStyleDeclaration オブジェクトのインスタンスであるライブスタイルオブジェクトを返します。これは、要素のスタイルが変更されると、計算済みスタイルが自動的に更新されることを意味します。

JavaScript getComputedStyle() の例

getComputedStyle() メソッドを使用する例をいくつか見てみましょう。

1) シンプルな getComputedStyle() メソッドの例

次の例を考えてみましょう。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JS getComputedStyle() Demo</title>
    <style type="text/css">
        .message {
            background-color: #fff3d4;
            border: solid 1px #f6b73c;
            padding: 20px;
            color: black;
        }
    </style>
</head>
<body>

    <p class="message" style="color:red">
        This is a JS getComputedStyle() Demo!
    </p>

    <script>
        let message = document.querySelector('.message');
        let style = getComputedStyle(message);

        console.log('color:', style.color);
        console.log('background color:', style.backgroundColor);
    </script>
</body>
</html>
Code language: HTML, XML (xml)

出力

color: rgb(255, 0, 0)
background color: rgb(255, 243, 212)

デモンストレーションの目的で、すべての CSS と JavaScript を HTML と混在させていることに注意してください。実際には、別々のファイルに分ける必要があります。

仕組み

まず、HTML ファイルの head セクションで message クラスの CSS ルールを定義します。テキストの色は黒です。
次に、インラインスタイルで定義されているように、テキストの色が赤色の段落要素を宣言します。このルールは、head セクションで定義されたルールをオーバーライドします。
3番目に、getComputedStyle() メソッドを使用して、段落要素のすべての計算済みスタイルを取得します。color プロパティは、コンソールウィンドウに示されているように、期待どおり red (rgb(255, 0, 0)) です。

2) 疑似要素の getComputedStyle() メソッドの例

次の例では、getComputedStyle() メソッドを使用して、疑似要素からスタイル情報を取得します。

<html>
<head>
    <title>JavaScript getComputedStyle() Demo</title>
    <style>
        body {
            font: arial, sans-serif;
            font-size: 1em;
            line-height: 1.6;
        }

        p::first-letter {
            font-size: 1.5em;
            font-weight: normal
        }
    </style>
</head>
<body>
    <p id='main'>JavaScript getComputedStyle() Demo for pseudo-elements</p>
    <script>
        let p = document.getElementById('main');
        let style = getComputedStyle(p, '::first-letter');
        console.log(style.fontSize);
    </script>
</body>
</html>Code language: HTML, XML (xml)

出力

24px

仕組み

まず、HTML ファイルの head セクションで、段落要素の最初の文字の CSS ルールを定義します。
次に、getComputedStyle() メソッドを使用して、疑似要素の計算済みスタイルを取得します。ID が指定された段落の最初の文字のフォントサイズは 24px です。

まとめ

getComputedStyle() は window オブジェクトのメソッドです。
getComputedStyle() メソッドは、要素の計算済みスタイルを含むオブジェクトを返します。

クイズ

このチュートリアルは役に立ちましたか？