Jquery .width（）未给出一致的结果

对于同一个selector.width，我得到了两个不同的值，我试图找出如何/为什么

伪代码：

<div id="wrapper">
<ul>
<li>...</li>
</ul>
</div>

我有一个链接，可以在$'wrapper.width和$window.width之间切换列表项的宽度。大致上是全屏和背面的常规视图。如果包装为固定宽度，例如宽度=500px，则一切正常

但是，如果包装器的宽度为50%，则会得到意外的结果。.width为精细读数：第一次显示页面时正确。也就是说，上一个/下一个控件等正确对齐。如果我切换到全屏，然后再次返回常规视图，则.width值会少几个像素。我尝试过宽度=X%，X的值不同，差别也不同。也就是说，它不是固定的

填充和边距设置为零，所以我不认为是这样

另外，我有一个$window.resize函数，如果我轻轻移动窗口一点，那么宽度读数就会自动修正。即使我打开底部的Firebug，它也会自行修复

---

我理解伪代码是模糊的。我只是希望能得到一些想法和方向，我可以如何定位问题所在，这样我就可以解决它

jQuery的.width提取CSS宽度，而不是计算的宽度，后者用于填充、边框等。要获得元素的真实宽度，应该使用

document.getElementById('myElement').offsetWidth

---

示例，显示结果的差异：

jQuery的.width提取CSS宽度，而不是计算的宽度，该宽度用于填充、边框等。要获取元素的真实宽度，应使用

document.getElementById('myElement').offsetWidth

---

示例，显示结果的差异：

首先，我建议您解决这个问题，在包装器元素中添加/删除一个类，将列表宽度扩大到100%，而不是窗口宽度

.fullscreen {
  width: 100%;
}

// on X event
$('#wrapper').addClass('fullscreen');
// on -X event
$('#wrapper').removeClass('fullscreen');

如果你不遵循前面的解决方案。。。还有其他方法。这一问题可能与以下因素有关。这意味着jQuery可以认为宽度是一回事，而浏览器可以认为宽度是另一回事。在这种情况下，我认为应该使用而不是$'X'。width

同样，第一个解决方案应该是好的

---

干杯

首先，我建议您解决这个问题，在包装器元素中添加/删除一个类，使列表宽度达到100%，而不是窗口宽度

.fullscreen {
  width: 100%;
}

// on X event
$('#wrapper').addClass('fullscreen');
// on -X event
$('#wrapper').removeClass('fullscreen');

如果你不遵循前面的解决方案。。。还有其他方法。这一问题可能与以下因素有关。这意味着jQuery可以认为宽度是一回事，而浏览器可以认为宽度是另一回事。在这种情况下，我认为应该使用而不是$'X'。width

同样，第一个解决方案应该是好的

---

干杯

很难说，但您也应该查看父元素的位置和偏移属性。包装器是如何布局的？它是定位的、浮动的还是流动的？看看这是否有助于Thx获得所有帮助。我能说的最好的一点是，当全屏显示时，使用位置的内部内容实际上比包装更宽。我找到了一个解决办法：当我从full转到reg时，我将内部内容的宽度设置为0，然后获得正确的包装宽度，然后再次将内部内容设置为正确的宽度。我想有点像黑客，但它很管用。再次使用Thx。这很难说，但您也应该查看父元素的位置和偏移属性。包装器是如何布局的？它是定位的、浮动的还是流动的？看看这是否有助于Thx获取所有帮助。我能说的最好的一点是，当全屏显示时，使用位置的内部内容实际上比包装更宽。我找到了一个解决办法：当我从full转到reg时，我将内部内容的宽度设置为0，然后获得正确的包装宽度，然后再次将内部内容设置为正确的宽度。我想有点像黑客，但它很管用。再次使用Thx。该JSFIDLE似乎不包含任何与此对话相关的内容。看来小提琴不知何故被劫持了。我不知道这个iframe是关于什么的。这个jsfiddle似乎没有包含任何与这个对话相关的内容。看起来小提琴不知何故被劫持了。我不知道那是怎么回事。