javascript - jQuery を使用して CSS で指定された実際の値を取得する

Question

説明

これが以前に尋ねられたことがないとは信じられませんが、とにかく...この質問と混同しないでください。

dataこの値を取得して特定の要素の元の値をリセットできるように、jQuery メソッドを使用して要素の高さを保存しようとしています。

ただし、要素の高さを取得しようとすると、実際の CSS 値ではなく、計算された高さが返されます。これは他の場合には非常に役立ちますが、100%、auto、10px など、スタイルシートで指定された正確な値を実際に取得する必要があります...

jQueryを使用して要素の正確なCSS(計算されていない)値を取得する方法はありますか?

例 (CSS):

#wrapper {
    height: auto;
}

そしてJS：

// Returns 'auto' NOT computed value...
var height = $('#wrapper').height();

現在確認できる唯一の代替手段はstyle、要素のインラインタグを削除することです。これにより、jQuery によって適用されたスタイルが削除されます。この方法の明らかな欠点は、特定のスタイルだけでなく、すべてのスタイルを削除することです...

score 10 · Accepted Answer

jQueryを使用すると、計算された値のみを取得できます。

別の方法として、ページに適用されたスタイルシートを列挙し、セレクターを照合し、優先順位と CSS の特異性によって重み付けすることで、元の css 値を見つけるスクリプトを作成しました。

autoこれは、何かがvs. 100%vs. 固定サイズかどうかを調べるのに便利です。

利用方法：

resolveAppliedStyle(document.getElementById("wrapper"), "height");

resolveAppliedStyle のスクリプトは次から取得できます。

から特異性を計算するために使用するスクリプト:

score 3 · Accepted Answer

jQueryを使用して要素の正確なCSS(計算されていない)値を取得する方法はありますか?

計算された値はpx、DOM 経由でのみ取得できます。

そうは言っても、要素の高さを取得し、それを親の高さと比較することで、パーセンテージを計算できます。em、enその他の測定はできません。