問題タブ [computed-style]

要素を呼び出しwindow.getComputedStyle()て、文字列と数値の両方を持つことができる lineHeight などのプロパティを取得しようとすると、毎回数値を返す方法または別の関数はありますか?

私のline-height例はnormalキーワードを参照しています。その他の例としては、フォントの太さや境界線の幅などがあります。これらはすべてキーワードを使用しますが、数値にマップします。

これはバグなのか、それとも適切な回避策があるのか​​ 疑問に思います：

Safari (Dev Tools に iOS Safari 8.1 および Safari 7.0.5 を使用) でのみ、ブラウザーは次のスタイルの要素に対して計算された値を持っていないようです:

.node { top: calc(39px - 100%); }

ブラウザでは正しく表示されますが、window.getComputedStyle($('.node')).top返さnullれ、実際には Safari の開発ツールの Computed Properties にも表示されtop: nullます。スタイルをピクセル値に変更すると、Computed Property が正しく表示されます (例: top: 400px)。

JavaScript の計算で計算されたスタイル値を使用したいので、これは私にとって問題です。

任意の要素の font-size プロパティを返すクロム拡張に取り組んでいます。ajax 応答データを拡張ドキュメントにロードし、それらのプロパティを計算しています。今、何か奇妙なことが起こっていて、私はその理由を見つけることができません.

分析している Web ページに見出しタグがあります。Web ページの [スタイル] タブ (要素の検査) には、フォント サイズが 2em で、計算値が 32 ピクセルであると表示されます。

今、Chrome 拡張機能で同じページを読み込むと、拡張機能の [スタイル] タブ (要素の検査) にフォントサイズが 2em と表示されますが、計算されたスタイルが 24px と表示されます。明確にするために、ウェブページとクロム拡張の両方のスタイルと計算されたスタイルの画像を添付しています。

ケース 1: スタイル (Web ページ)

計算されたスタイル (Web ページ)

ケース 2: スタイル (Chrome 拡張機能の読み込み後)

計算されたスタイル (Chrome 拡張機能での読み込み後)

なぜこれが起こっているのか知りたいだけですか？同じスタイル (2em) ですが、ブラウザー ウィンドウは計算されたサイズを 32 として表示し、拡張ウィンドウ (同じブラウザー上) は 24px を表示します。

特定の DOM 要素の計算されたスタイルが変更されたことを通知する JavaScript でリッスンできるイベントはありますか?

そうでない場合、JavaScript を使用して DOM 要素の計算されたスタイルを取得する最もブロックの少ない方法は何ですか?

MDNによると:

from/0%またはto/が指定されていない場合100%、ブラウザはすべての属性の計算値を使用してアニメーションを開始または終了します。

次の例では、heightプロパティの計算値は次のとおりです0px。

しかし、ブラウザーはvalue で指定されheight: auto;た要素である を使用するため、アニメーションが機能しません。

仕様に似たものは次のとおりです。

0%またはキーフレームが指定されていない場合from、ユーザー エージェントは0%、アニメーション化されているプロパティの計算値を使用してキーフレームを構築します。100%またはキーフレームが指定されていない場合to、ユーザー エージェントは100%、アニメーション化されているプロパティの計算値を使用してキーフレームを構築します。

しかし、ブラウザーが実際にfrom {height: 0px;}計算値である を追加した場合、アニメーションは適切に機能します。上記のドキュメントでは、計算値の代わりに指定された値を使用する方が正確ではありませんか?