JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでCSSプロパティの現在の値を取得する方法｜getComputedStyleの使い方

JavaScriptでHTML要素に適用されているCSSプロパティの現在の値（計算済みスタイル）を取得するには、window.getComputedStyle()メソッドを使用します。このメソッドは、対象の要素に適用されたすべてのスタイル情報を含むオブジェクトを返します。

返されたオブジェクトに対してgetPropertyValue()メソッドを呼び出せば、任意のCSSプロパティの値を文字列として取得できます。インラインスタイルが設定されていない場合でも、外部CSSや継承によって最終的に適用されている値を取得できるのが大きな特徴です。

基本構文

const element = document.querySelector('セレクタ');
const style = window.getComputedStyle(element);
const value = style.getPropertyValue('プロパティ名');

サンプル1：background-colorの値を取得する

次の例では、ページ内のdiv要素の背景色（background-color）を取得し、span要素に出力しています。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    margin: 4%;
    padding: 4%;
    width: 50%;
    text-align: center;
    background-color: powderblue;
    border-radius: 4%;
}
</style>
</head>
<body>
<div>Test Div</div>
<span></span>
<script>
let element = document.querySelector('div');
let getStyle = window.getComputedStyle(element);
document.querySelector('span').textContent = ('background-color: ' + getStyle.getPropertyValue('background-color') + '.');
</script>
</body>
</html>

実行結果

このコードをブラウザで開くと、div要素の下に次のようなテキストが表示されます。

JavaScriptでCSSプロパティの現在の値を取得する方法｜getComputedStyleの使い方

なお、色の値は元のキーワード（powderblue）ではなく、計算後のrgb()形式で返される点に注意してください。

サンプル2：box-shadowの値を取得する

続いて、box-shadowプロパティの値を取得する例です。ここでは、内側の影と緑色の枠線で装飾した円形のdiv要素のスタイルを読み取ります。

<!DOCTYPE html>
<html>
<head>
<style>
div {
    display: flex;
    margin: 4%;
    padding: 4%;
    width: 20vh;
    height: 20vh;
    box-shadow: inset 0 0 23px cadetblue;
    border: 2px groove green;
    border-radius: 50%;
}
</style>
</head>
<body>
<div><div></div></div>
<span></span>
<script>
let element = document.querySelector('div');
let getStyle = window.getComputedStyle(element);
document.querySelector('span').textContent = ('box-shadow: ' + getStyle.getPropertyValue('box-shadow') + '.');
</script>
</body>
</html>

実行結果

このコードを実行すると、box-shadowの現在の値が画面に出力されます。

JavaScriptでCSSプロパティの現在の値を取得する方法｜getComputedStyleの使い方

ポイントと注意点

  • getComputedStyle()が返すのは「計算済みの値」です。ショートハンドプロパティで指定した場合でも、ブラウザが解釈した最終的な値が返されます。
  • 色はrgb()形式、長さはpx単位など、正規化された形式で返されることが一般的です。
  • 疑似要素（::beforeや::after）のスタイルを取得したい場合は、第2引数に疑似要素名を渡します。
    例：window.getComputedStyle(element, '::before')

このようにgetComputedStyle()を活用すれば、JavaScriptから要素の実際の見た目に関わるあらゆるスタイル値を動的に読み取り、条件分岐やアニメーション制御などに活かすことができます。

  1. CSSのalign-contentプロパティでflex-endを使う方法

    CSSのalign-contentプロパティに値flex-endを指定すると、フレックスコンテナ内のフレックスライン（行）を交差軸方向の終端側に寄せて配置できます。align-content: flex-endとはalign-contentプロパティは、flex-wrap: wrapなどによって複数のフレックスラインが発生した場合に、それらのライン全体を交差軸（デフォルトでは縦方向）のどこに配置するかを制御します。値としてflex-endを指定すると、すべてのフレックスラインがコンテナの終端側にまとめられます。サンプルコード以下のコードを実行して、flex-end値の実際の動作を確認してみまし

  2. 【CSS解説】justify-contentプロパティのflex-start値でフレックスアイテムを先頭に揃える方法

    CSSのjustify-contentプロパティにflex-startを指定すると、フレックスコンテナ内のフレックスアイテムを主軸方向の先頭（開始位置）に揃えて配置できます。flexboxレイアウトにおいて、アイテムの水平方向の配置を制御する際によく使われる基本的な値です。flex-startの動作デフォルトの書字方向（左から右）の場合、アイテムはコンテナの左端から順に並びます。余ったスペースはすべてアイテムの後ろ（右側）に残ります。実装例以下のコードは、justify-content: flex-start;を使って、赤い背景のフレックスコンテナ内にオレンジ色のアイテムを左寄せで配置する例で