この投稿では、JavaScript の window オブジェクトの「getComputedStyle()」メソッドの目的、仕組み、使用法について説明します。
Window オブジェクトの「getComputedStyle()」メソッドは JavaScript で何をしますか?
” getComputedStyle() 」メソッドは、CSS プロパティとその値のコレクションを含む「CSSStyleDeclaration」オブジェクトを返します。ターゲットの HTML 要素のスタイル設定プロパティを計算します。さらに、HTML 要素の特定の部分のスタイル プロパティを計算する際にも重要な役割を果たします。
構文
窓。 getComputedStyle ( エレメント 、 擬似要素 ）
上記の構文では次のようになります。
- 窓： これはブラウザ ウィンドウを表すグローバル オブジェクトです。
- エレメント： スタイルを計算する必要がある特定の HTML 要素を指定します。
- 疑似要素: これは、最初の文字、最後の文字など、指定された HTML 要素の一部を指します。
次のセクションでは、例を使用して「getComputedStyle()」メソッドを実際に説明します。
HTML コード (CSS スタイルを含む)
まず、次の HTML コードの概要を理解します。
< 頭 >
< スタイル >
h3{
フォントサイズ: 20px;
背景色:緑黄
}
< / スタイル >
< / 頭 >
< 体 >
< h2 > Window オブジェクトの getComputedStyle() メソッドを使用する < / h2 >
< h3 ID = 'デモ' > 指定された HTML 要素のフォント サイズは次のとおりです。 < / h3 >
< p ID = 'サンプル' >< / p >
上記のコード行では次のようになります。
- ” <スタイル> ” タグは、” の指定されたスタイルを適用します。 ” HTML要素。
- の中に ' <本文> 」セクションには小見出しが含まれています。 」
- 次に、ID「」を持つ「
」要素 デモ ” は 2 番目の小見出しを指定します。
- 最後に、「 ” タグは、ID が付いている空の段落を参照します” サンプル 」を使用して、ターゲット要素の計算された CSS プロパティを表示します。
ノート： この HTML コードは、この投稿に記載されているすべての例で使用されています。
例 1: 「getComputedStyle()」メソッドを適用して HTML 要素のフォント サイズを計算する
この例では、「getComputedStyle()」メソッドを適用して、対象の HTML 要素のフォント サイズを取得します。
JavaScript コード
記載されている JavaScript コードを考えてみましょう。
< 脚本 >定数 エレメント = 書類。 getElementById ( 'デモ' ） ;
定数 オブジェクト = 窓。 getComputedStyle ( エレメント ）
サイズを聞かせてください = オブジェクト getPropertyValue ( 'フォントサイズ' ） ;
書類。 getElementById ( 'サンプル' ） 。 内部HTML = サイズ ;
脚本 >
上記のコード スニペットでは次のようになります。
- 変数を宣言します。 エレメント 」を利用する「const」キーワードを使用します。 getElementById() ” ID を介して「
」要素にアクセスするメソッド” デモ ”。
- その後、「」を適用します。 getComputedStyle() 」メソッドを使用して、フェッチされた「
」要素の CSS プロパティを計算します。
- 次に、「 サイズ ”変数は”を適用します getPropertyValue() 「適用された CSS プロパティの値を返すメソッド」 フォントサイズ ” を文字列として指定します。
- 最後に、「getElementById()」メソッドは空の段落にアクセスし、「 内部HTML ' 財産。
出力
ご覧のとおり、出力には、対応する HTML 要素、つまり「
」に対して適用されたフォント サイズの値が表示されます。
例 2: 「getComputedStyle()」メソッドを適用して HTML 要素の背景色を計算する
この例では、説明した方法を利用して、特定の HTML 要素の背景色を計算します。
< 脚本 >定数 エレメント = 書類。 getElementById ( 'デモ' ） ;
定数 オブジェクト = 窓。 getComputedStyle ( エレメント ）
背景色を変えましょう = オブジェクト getPropertyValue ( 「背景色」 ） ;
書類。 getElementById ( 'サンプル' ） 。 内部HTML = バックカラー ;
脚本 >
上記のコード ブロックでは、「 getComputedStyle() ” メソッドは、” を計算します。 背景色 ID が「demo」である「
」要素の「」は、「」経由でその値を「rgb」として返します。 getPropertyValue() ' 方法。
出力
出力には、フェッチされた HTML 要素の計算された背景色が明確に表示されます。
結論
JavaScript が提供するのは「 getComputedStyle() 」ターゲット HTML 要素の CSS スタイル プロパティを計算するメソッド。このメソッドの計算値は、CSS プロパティとその値を含む文字列です。 JavaScript を使用してさまざまな方法で実装し、HTML 要素の CSS プロパティを取得できます。この投稿では、JavaScript の window オブジェクトの「getComputedStyle()」メソッドの目的、仕組み、使用法について詳しく説明しました。