【Javascript】「getComputedStyle」メソッド - CSSを適用したスタイルを参照する
【Javascript】
「getComputedStyle」メソッド - CSSを適用したスタイルを参照する
「Javascript」の「getComputedStyle()」 メソッドは、
CSSのスタイルを適用した後のスタイル値を参照できるメソッド。
「style」タグや「外部スタイルシート」で設定されたものも含め、要素のスタイルを検査するためのメソッドで、
「element.style」オブジェクトは、スタイルを設定したり、 「JavaScript」などで変更されたStyleや、「style」属性から直接追加されたスタイルを検査することを目的としたメソッド。
「getComputedStyle()」 メソッドの書式
let 変数名 = window.getComputedStyle(element [, pseudoElt]);
「element」= 「HTMLタグ」「#ID名」「.クラス名」などで取得したエレメントを指定。
「pseudoElt」 = 一致させる擬似要素を指定する文字列。実在する要素の場合は省略 (または null)。
サンプルコード
let Get_Element = document.querySelector('#ID名');
let Get_Element = document.querySelector('.クラス名');
let Get_Element = document.querySelector('タグ名');
let Get_Style = window.getComputedStyle(Get_Element);
「getComputedStyle()」 メソッドから返されるオブジェクトは、
「CSSStyleDeclaration型」で、「style」プロパティの値を参照している。
「getComputedStyle()」 メソッドから返されたオブジェクトは読み取り専用。
Back