Question

我需要获得具有动态宽度的<ul>的宽度，以便将其封闭的<li>的宽度设置为IE7的<ul>的宽度。

<ul>的样式为display:block。目前jQuery的.width()返回0。我试图获得最宽<li>的宽度，因为它设置了<ul>的宽度，但是在这里，我也得到了0？

是否有任何方法（或解决方法）来获取<ul>或其<li>的宽度？

劳拉

Answer 1

尝试使用方法“offsetWidth”：

<ul id="MyElement" style="display:block;visibility:hidden;">
    <li>Hello World!</li>
    <li>Hellow Web!</li>
</ul>
<script type="text/javascript">
    alert(document.getElementById('MyElement').offsetWidth);
</script>

它应该返回一个元素的动态宽度。

或者如果你想让jQuery尝试将它添加到你的jQuery文件（jquery.js）

jQuery.fn.offsetWidth = function () {
    return this.offsetWidth;
}

如果将其设置为隐藏（似乎是问题）并仍然返回0作为宽度，请尝试克隆元素（要从中获取宽度的元素）。设置元素副本的css position:absolute; left:-200; top -200;visibility:visible;。获取元素副本的宽度jQuery或JavaScript。删除元素副本。你现在应该得到宽度。 top和left设置为否定，因此元素副本不会显示在屏幕上。

请注意，这可能会使您的执行速度变慢。

Answer 2

jQuery不喜欢隐藏的元素：jQuery - Get Width of Element when Not Visible (Display: None)

Answer 3

您是否将脚本编写为$（document）.ready（）处理程序的一部分？像：

$(document).ready(function() {
// Here.
});

或者是否在页面加载时运行？也许你的脚本在设置<ul>的宽度之前执行。

Answer 4

您是否需要列表项目才能拥有项目符号？如果不这样做，可以通过将display:block应用于<li>来解决此问题。

Answer 5

我做下拉菜单的方法是将它们设置为position：absolute和left：-5000px（而不是display：none）。这样，当您想要隐藏/显示它们时，您可以设置/删除“左”属性，并且元素的尺寸始终可用。由于你还没有发布任何代码/标记，我不确定这个建议是否适用于你的情况，但我想我会把它扔出去。

至于回答你的问题，你应该使用offsetWidth，并记得将元素的填充，边框宽度和边距值添加到offsetWidth。

在jQuery中获取ul的宽度

5 个答案: