web-dev-qa-db-ja.com

ブラウザー開発者ツール：HTML要素の位置は何ですか？

最新のWeb開発者ツール（Chrome/FF/IEなど））は、特定の要素の「ボックスモデル」と「計算されたCSSプロパティ」を表示する方法を提供します。

このようなツールで最終計算/レイアウト位置を簡単に監視する方法はありますか？

絶対的であることが好ましいが、親コンテナ内でも適切です。前述の[Windows]ブラウザーを使用することはできますが、Chromeを使用することを好みます。

csslayoutpositionbrowserweb-developer-toolbar
30
user2864740

Chrome、Firefox、Edge、およびIE11 +では、要素が選択されると、コンソールウィンドウで次のように入力してこの要素にアクセスできます。

_$0_

その後、 Javascript DOM API を使用してクエリと操作を行うことができます。これには Element.getBoundingClientRect（） という非常に便利なメソッドがあります。

そのため、要素を選択したときにコンソールウィンドウに次のように入力するだけです。

$0.getBoundingClientRect()

ブラウザは次のようなオブジェクトを返します。

_{ x: 1081, y: 72, width: 49, height: 28, top: 72, right: 1130, bottom: 99, left: 1081 }_

70
Wayne Maurer

Chrome開発ツール->設定->一般->要素->ルーラーの表示。

Chromeプラグインをインストールして、もう少し機能を追加することもできます。

13
dwilson