Question

我为同一个selector.width()获得了两个不同的值，我试图弄清楚如何/为什么。

伪代码：

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

我有一个链接可以在$('#wrapper').width()和$(window).width()之间切换列表项的宽度。或多或少的常规视图到全屏和背面。如果#wrapper是固定宽度（例如width=500px），一切都很好。

但是，如果包装器是（例如）width:50%，那么我会得到意想不到的结果。当我第一次显示页面时，.width很好（读取：正确）。也就是说，prev / next控件等正确排列。如果我切换到全屏，然后再次返回常规视图，则.width值会减少几个/几个像素。我已经尝试了width=X% X的不同值，但差异发生了变化。也就是说，它没有固定。

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

另外，我有一个$(window).resize(function()，如果我稍稍微调窗口，那么宽度读数会自行纠正。即使我在底部打开Firebug也会自行修复。

我理解伪代码含糊不清。我只是希望得到一些想法和方向，我可以如何确定问题所在，以便我可以修复它。

Answer 1

jQuery的.width（）拉取CSS宽度，而不是计算宽度，它考虑了填充，边框等。要获得元素的真实宽度，你应该使用

document.getElementById('myElement').offsetWidth

示例，显示结果的差异： ~~http://jsfiddle.net/xixao/DNbqu/~~

Answer 2

首先，我鼓励您解决此问题，将类添加/删除到将列表扩展为100％而不是窗口宽度的包装元素。

.fullscreen {
  width: 100%;
}

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

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

第一种解决方案应该没问题。

干杯！

.width（）没有给出一致的结果

2 个答案: