获取 jQuery 中 ul 的宽度

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 作为宽度，请尝试克隆元素（要从中获取宽度的元素）。 设置 ZC7A62 position:absolute; left:-200; top -200;visibility:visible; position:absolute; left:-200; top -200;visibility:visible; 你的元素副本。 获取元素副本的宽度 jQuery 或仅 JavaScript。 删除元素副本。 你现在应该得到宽度。 top和left设置为负数，因此元素副本不会出现在屏幕上。

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

Answer 2

jQuery 不喜欢隐藏元素： jQuery - 不可见时获取元素的宽度（显示：无）

Answer 3

您是否将脚本编写为 $(document).ready() 处理程序的一部分？ 喜欢：

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

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

Answer 4

你需要列表项有项目符号吗？ 如果您不这样做，则可以通过将display:block应用于<li> s，仅使用 CSS 来解决此问题。

Answer 5

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

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