HTML工具：获取所需div的宽度和高度的方法？

Question

如果我想在CSS文件中创建一个div类，它只是一个页面上的矩形框。如何在没有过多试错的情况下计算这个div的高度和宽度？

我真正需要的是一个简单的工具，你可以点击屏幕的一个部分，然后点击屏幕的另一部分，它会给你两个点击点之间的水平，垂直和对角像素距离。有谁知道这样做的工具？也许我可以创建一个，这似乎非常有用。

Answer 1

关于第一部分：您可以使用chrome开发人员工具调整div - 非常方便。

https://developers.google.com/chrome-developer-tools/docs/elements

关于第二部分：你可以编写一个函数而不是处理鼠标点击事件，并根据坐标计算你想要的数字。然后，此函数可用作chrome dev工具中的代码段。 我会在几分钟内为你写一个......

Answer 2

屏幕截图＆gt;在GIMP或类似内容中打开＆gt;计数像素。

但是，如果您需要实际的开发人员工具，则取决于浏览器：

• Firefox有Firebug（附加组件）。要使用Firebug查找它，请在HTML视图中，右键单击您的元素，单击“Inspect in DOM”，然后找到“innerWidth / innerHright”。
• Chrome已Developer Tools（扩展名）。我相信这只是通过将鼠标悬停在HTML视图中的元素上来显示高度/宽度。
• Opera内置了一个名为DragonFly的内容。在HTML视图中选择元素，然后在右侧窗口中选择“布局”并查看“clientWidth / clientHight”。

我不相信有办法找到Internet Explorer或Safari。