javascript - 获取 html 标签的大小

Question

当我在 Chrome 中使用开发工具的链接时，我可以选择任何标签（在源代码中）并显示有关所选元素的信息（下图）。我需要编写可以执行相同操作的脚本。如何获取源代码中每个标签的宽度和高度。任何想法？ .

Answer 1

你知道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

Answer 2

有这个可爱的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);