css 如何在Chrome开发者工具中查找任何元素的计算大小?

plicqrtu  于 2023-05-23  发布在  其他
关注(0)|答案(2)|浏览(211)

我确信这是在开发工具检查器的某个地方,但我找不到它。对于一个给定的元素(比如,div),我在哪里找到计算出的尺寸(高度和宽度),我右键单击并选择“检查元素”?

byqmnocz

byqmnocz1#

只需将鼠标悬停在开发人员工具面板下方功能区中的元素名称上即可。相应的元素将在浏览器窗口中高亮显示,尺寸标注将显示在该元素的一角。此外,如果你在开发者工具中向下滚动右窗格,你会看到“度量”窗口,它会给予你计算的尺寸,还有边距,填充,边框等。
下面是保存SO问题的div维度的屏幕截图。当我将鼠标悬停在底部的div名称上时,请注意高亮区域左下角的尺寸。右侧是“度量”窗口。

Click here for bigger image
对于未来的问题,请先参考Google的nice documentation

qncylg1j

qncylg1j2#

如果你像我一样,在浏览器的控制台中寻找一种输出元素宽度的方法,那么答案如下:

document.querySelector("element_id").clientWidth;

相关问题