2

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

伪代码：

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

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

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

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

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

我知道伪代码是模糊的。我只是希望对我如何能够确定问题出在哪里有一些想法和方向，以便我可以解决它。

4

2 回答 2

0

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

document.getElementById('myElement').offsetWidth

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

于 2012-07-23T16:38:23.477 回答
0

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

.fullscreen {
  width: 100%;
}

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

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

同样，第一个解决方案应该没问题。

干杯!

于 2012-07-23T17:24:16.890 回答