我们如何使用 javascript 或 jquery 获取由 chrome 计算的元素的高度和宽度？

【问题标题】：How can we get height and width of an element calculated by chrome using javascript or jquery?我们如何使用 javascript 或 jquery 获取由 chrome 计算的元素的高度和宽度？
【发布时间】：2015-07-20 13:52:49
【问题描述】：

当我们在 chrome 浏览器上检查元素时，它会显示该元素的高度和宽度。所以我的问题是，我们可以使用任何脚本语言（如 javascript 或任何外部 api）来获得计算出的高度和宽度吗？

【问题讨论】：

.getComputedStyle(), How do i get a computed style?
如果您有可用的 jQuery，请尝试以下方法之一：width()、outerWidth()、innerWidth()、height()、innerHeight()、outerHeight()。见api.jquery.com/category/dimensions
是的，我都试过了。但结果并不理想
我试过 .width()、.offsetwidth、.clientWidth，但没有一个能像 chrome 一样给出准确的值。
试过 $(element).offset().top 和 $(element).offset().left from jquery??

标签： javascript jquery html css google-chrome

【解决方案1】：

你可以使用

var height = document.getElementById(<id of the element>).offsetHeight;
var width = document.getElementById(<id of the element>).offsetWidth;

在 JavaScript 文件中，如果您正在搜索，则嵌入在该页面上。

【讨论】：

问题解决

问题解决

名称

© Houghton Mifflin Harcourt Publishing Company
这是一个明智的答案，但并非在所有情况下都是正确的。像 flex 这样的东西搞砸了。

【解决方案2】：

翁德拉是对的，

您需要包含 jQuery，下面的代码将帮助您开始（基于您突出显示的元素（第一个 function() 行是为了确保您的文档已准备好：

<script>
$(function() {
  width = $('div#t8_2').width();
  height = $('div#t8_2').height();
});
</script>

编辑：在我看来，您正在尝试计算文本宽度而不是元素的宽度。

我从 philfreo 那里得到这个问题的答案：

Calculating text width

这是他的 jsFiddle：http://jsfiddle.net/philfreo/MqM76/

应该可以的。

【讨论】：

Chrome 显示 408px 宽度，但 .width() 显示 1470px。
我可以看到你的 html 代码的一部分，其中包含 div#t8_2 以及里面的任何元素吗？如果您尝试 google 的完整 css 路径如下： width = $('div#t8_2.t.s7_2').width();