javascript - HTMLタグのサイズを取得する

Question

Chromeで開発ツールのリンクを使用している場合、（ソースコード内の）任意のタグを選択でき、選択した要素に関する情報が表示されます（下の画像）。同じ操作ができるスクリプトを書く必要があります。ソースコード内のすべてのタグの幅と高さを取得する方法。何か案が？ 。

Answer 1

この素敵なgetBoundingClientRect関数があります。jQueryは必要ありません。すべてのブラウザで動作します。

var rect = document.getElementById('foobar').getBoundingClientRect();

console.log(rect.width);
console.log(rect.height);
console.log(rect.left);
console.log(rect.right);
console.log(rect.top);
console.log(rect.bottom);

Answer 2

あなたはjQueryを知っていますか？このライブラリを使用すると、次のものを取得できます。

$('#element').innerWidth(); ---> width of #element's content + padding
$('#element').width(); ---> width of #element including padding and borders
$('#element').outerWidth(); ---> width of #element + padding + borders + margins

高さについても同じもの：

$('#element').innerHeight(); ---> height of #element's content + padding
$('#element').height(); ---> height of #element including padding and borders
$('#element').outerHeight(); ---> height of #element + padding + borders + margins