JavaScript を使用して特定の CSS 値を効率的に取得するにはどうすればよいですか?

JavaScript を使用した CSS 値の取得

JavaScript で CSS 値を設定するのは style 属性を使用するのが簡単ですが、現在の CSS 値を取得するのはより難しい場合があります。 。この記事では、スタイル文字列全体を解析せずに特定の CSS 値を取得する方法について説明します。

解決策: getComputedStyle()

この問題の解決策は次のとおりです。 getComputedStyle() メソッド。このメソッドを使用すると、要素の計算されたスタイルにアクセスできます。これには、インライン スタイルと継承されたスタイルの両方を含む、要素に適用されているすべての CSS 値が含まれます。

getComputedStyle() を使用するには、それに要素を渡します。スタイルを取得したい。これは、その要素の計算されたすべてのスタイル プロパティを含むオブジェクトを返します。その後、このオブジェクトの getPropertyValue() メソッドを使用して、特定の CSS プロパティの値を取得できます。

ID image_1 の画像要素の最上位 CSS 値を取得する方法を示す例を次に示します。

このコードは、画像要素の現在の最上位値をコンソールに記録します。最上位の値は文字列であるため、計算を実行する必要がある場合は、最初に数値に変換する必要があることに注意してください。

以上がJavaScript を使用して特定の CSS 値を効率的に取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。