Skip to content

ライブラリを使わずに要素のスタイルを取得する

jQuery などを使わずに CSS の指定を取得、更新する方法と、その注意点についてまとめます。

jQuery を使う場合も内部的にはこれらの方法が使われているので、知っておくとよいでしょう。

HTMLElement.style と window.getComputedStyle() の違い

まず、スタイルの取得には2通りの方法があります。

1つは HTMLElement.style プロパティを使う方法で、もう1つは window.getComputedStyle() メソッドを使う方法です。

どちらも CSSStyleDeclaration オブジェクトを取得するという点は同じですが、取得できるプロパティや値には差異があるので注意が必要です。

HTMLElement.style プロパティ

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

  • 要素のインライン style 属性で設定された CSS 宣言のみ取得
  • 取得、更新に使用可

window.getComputedStyle() メソッド

https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

  • 外部 CSS の内容も含め、要素に指定されているスタイルを取得
  • 取得専用
  • 疑似要素のスタイルも取得可能
  • 歴史上の都合により、解析値(※)という特殊な値を取得

※解析値についてはこちらの記事にまとめています。
CSSの指定値、計算値・算出値、使用値、実効値

サンプルと注意点

外部 CSS でスタイルを指定したボタンと、インラインにスタイルを指定したボタンを用意し、それぞれの CSSStyleDeclaration オブジェクトを2つの方法で取得、出力しています。

その後 JavaScript によってスタイル(font-size)を更新し、再度 CSSStyleDeclaration オブジェクトを出力しています。

See the Pen HTMLElement.style window.getComputedStyle by okaka (@okaka) on CodePen.light

 

スタイル取得時のポイント

  • HTMLElement.style は要素のインラインへの指定のみ、window.getComputedStyle() は外部 CSS の指定も含む内容を取得できていることが、length の値からわかります 。
  • 「インライン CSS + HTMLElement.style」の場合の length が指定したプロパティの個数より多くなっていますが、これはショートハンドプロパティが分割されているためです。
  • window.getComputedStyle() では、padding の em が px に、width の auto が px になっています。これは解析値という特殊な値を取得しているためです。解析値についてはこちらの記事にまとめています。CSSの指定値、計算値・算出値、使用値、実効値
  • JavaScript によるスタイルの更新はインライン style 属性の更新となります。更新前に取得していた CSSStyleDeclaration オブジェクトにもこの更新は反映されます。

ブラウザ間の差異

ブラウザ間でも差異があります。取得できるプロパティが違っていたり、おなじプロパティでも取得できる値が異なる場合があります。

例えば、以下のような違いがあります。

  • Chrome 以外はショートハンドプロパティを取得できない。
  • 小数点以下の値に対する有効桁数、切り捨て、切り上げの処理が異なる。

Comments are closed.