现代的Web开发工具（例如Chrome / FF / IE）提供了一种查看特定元素的“框模型”和“计算的CSS属性”的方法。
最好是绝对的，但在父容器内也是合适的。我可以修改使用前面提到的任何[Windows]浏览器，但更喜欢使用Chrome。
5kgi1eie1#
在Chrome、Firefox、Edge和IE11+中，选中某个元素后，您可以在控制台窗口中键入以下内容来访问该元素：第一个月然后可以使用Javascript DOM API进行查询和操作，Javascript DOM API有一个非常有用的方法，称为Element.getBoundingClientRect()。因此，您所要做的就是在选择元素时在控制台窗口中键入以下内容：$0.getBoundingClientRect()浏览器将返回一个对象，例如：{ x: 1081, y: 72, width: 49, height: 28, top: 72, right: 1130, bottom: 99, left: 1081 }我发现在Chrome开发工具中使用以下实时表达式非常有用：!!$0 && JSON.stringify($0.getBoundingClientRect())
$0.getBoundingClientRect()
{ x: 1081, y: 72, width: 49, height: 28, top: 72, right: 1130, bottom: 99, left: 1081 }
!!$0 && JSON.stringify($0.getBoundingClientRect())
chy5wohz2#
Chrome开发工具-〉设置-〉常规-〉元素-〉显示标尺。你也可以安装Chrome插件，这将给予你更多的功能。
2条答案
按热度按时间5kgi1eie1#
在Chrome、Firefox、Edge和IE11+中，选中某个元素后，您可以在控制台窗口中键入以下内容来访问该元素：
第一个月
然后可以使用Javascript DOM API进行查询和操作，Javascript DOM API有一个非常有用的方法，称为Element.getBoundingClientRect()。
因此，您所要做的就是在选择元素时在控制台窗口中键入以下内容：
$0.getBoundingClientRect()浏览器将返回一个对象，例如：
{ x: 1081, y: 72, width: 49, height: 28, top: 72, right: 1130, bottom: 99, left: 1081 }我发现在Chrome开发工具中使用以下实时表达式非常有用：
!!$0 && JSON.stringify($0.getBoundingClientRect())chy5wohz2#
Chrome开发工具-〉设置-〉常规-〉元素-〉显示标尺。
你也可以安装Chrome插件，这将给予你更多的功能。