javascript - $(element).width() 与其实际像素宽度之间的奇怪差异

Question

我有一个网页，其中只有一个元素。我必须以毫米为单位设置此元素的宽度，但稍后我需要以像素为单位的宽度。我已经使用 css 代码设置了宽度，例如:

width:50mm

并在一段时间后获取宽度

$(element).width()

结果是 189。然后我按下键盘上的“打印屏幕”按钮并将剪贴板内容粘贴到图像编辑器中，奇怪的是它的宽度是 252px!

我很好奇为什么这些值彼此相差那么远？

这是我的代码:https://jsfiddle.net/k9w1fz0k/

Answer 1

如果一个元素有内边距或边框，内边距不会被考虑在元素的“布局宽度”中(由$(element).width()返回)，但会增加元素的视觉尺寸。这是因为宽度是元素的 CSS 属性，而不是计算出来的。

#foo {
  width: 100px;
  height: 100px;
  background: red;
}

#bar {
  width: 100px;
  height: 100px;
  padding: 100px;
  background: blue;
}

<div id="foo">foo</div>
<div id="bar">bar</div>