获取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