getComputedStyle メソッドを使用して要素 css_html/css_WEB-ITnose の属性値を取得します

日々の仕事で、要素の現在のスタイルを取得する必要があるという問題に遭遇することがあります。getComputedStyle メソッドを使用して要素の計算されたスタイルを取得できることを確認しました (その一部はまだ記述されていません)。 CSS では、ブラウザのデフォルトのスタイルも取得できます)

getComputedStyle の使い方

getComputedStyle は 2 つのパラメータを受け取ります。最初のパラメータは要素で、2 番目のパラメータはオプションの疑似要素です。

getComputedStyle メソッドは、すべてのスタイルを含むオブジェクトを返します。このオブジェクトの長さは、length メソッドを通じて取得できます。

要素の特定の css 属性の値を取得する

要素の css 属性値を取得するには、2 つの方法があります。1 つは、このメソッドが受け取る getComputedStyle メソッドによって返されるオブジェクトを通じて getPropertyValue メソッドを呼び出す方法です。属性名をパラメータとして指定し、属性値を返します。 (このメソッドのパラメータはキャメルケースで記述する必要はありません。背景色を取得したい場合は、「background-color」を直接渡すだけです)

もう 1 つの方法は、によって返されるオブジェクトのインデックスを直接使用することです。 getComputedStyle メソッド。

すごいです

参考: https://css-tricks.com/get-value-of-css-rotation-through-javascript/

要素の CSS 値を取得する getComputedStyle メソッドに精通しています - Zhang Xinxu