为什么 jQuery $('#selector').width(1) 应用 17px 而不是 1px？

Question

我的代码：

<select id="mySelect">...</select>
<div style="width:514">
<select id="myOtherSelect" style="100px">...</select>
</div>
$('#myForm').on('change', '#mySelect', function () {
    console.log($('#myOtherSelect').parent().width()); /**Output 514**/
    $('#myOtherSelect').width($('#myOtherSelect').parent().width());
});

触发'change'后：

主机显示： 514

检验显示： <select id="myOtherSelect" style="width:530px">

在我尝试过的每种情况下，即使在不同的页面上，当我尝试使用 jquery 的 .width（） 设置新宽度时，也会将 16 添加到指定的值中。

尝试硬编码值：

$('#myOtherSelect').width(514);//SAME RESULT! 530px, tried 1, got 17px, tried 4 got 20px

为什么会这样？我期待<select id="myOtherSelect" style="width:514px"> 'change'我最好的选择是什么？

Answer 1

试试这个怎么样，

$('#myForm').on('change', '#mySelect', function () {
    $('#myOtherSelect').width($('#myOtherSelect').parent().width());
});

Answer 2

您是否在

控制台中检查过盒子模型？ 也许这会显示额外像素隐藏在哪里？ 此外，如果这些元素占据了整个视口，则 16px 可能包括滚动条。

无论哪种情况，.innerWidth（） 都可能效果更好。

Answer 3

如果我理解正确，您希望获取此元素的宽度：

<select id="myOtherSelect" style="width:530px">

但是您的代码：

console.log($('#myOtherSelect').parent().width());

没有获取该元素，

而是获取父元素的宽度，因此它获取了option的宽度，可能是514像素：

<option ... > <!-- <<< This is the parent, not the select -->
    ...
    <select id="myOtherSelect" style="width:530px">
    ...
</option>

因此，只需删除.parent()部分：

console.log($('#myOtherSelect').width());

---

我的另一种解释是，您希望将$('#myOtherSelect')设置为父项的宽度，但不明白为什么它仍然是 514 像素而不是它设置为的 530 像素。在这种情况下，您只需在更改其宽度之前记录它，只需翻转它们：

$('#myOtherSelect').width($('#myOtherSelect').parent().width());
console.log($('#myOtherSelect').parent().width()); /**Output 530**/