使用jQuery在Chrome中获取元素宽度

Question

在将元素附加到页面主体之前，我需要知道其宽度。

以下脚本在火狐浏览器中运行良好，但在谷歌浏览器中不起作用。

<style>
 .testDiv { width:150px; height:100px; }
</style>

<script>
    var div = "<div class='testDiv'>Div Content</div>";
    alert($(div).width());
</script>

它在火狐浏览器中会输出150，但在谷歌浏览器中会输出0

我也尝试过其他的方法

$(window).load(
   function() {
    alert($(div).width());
   }
); 

但是它的作用是相同的...

更新：

我可以看到，如果声明 css inline，它就可以工作，但是我需要使用 css class。

var div = "<div style='width:150px;'>Div Content </div>";
alert($(div).width());

- MD SHAHIDUL ISLAM

---

可能是因为该div元素尚未出现在DOM中。请尝试添加该div元素，使用Append()/Prepend()/html()方法，然后检查其宽度。 - SSS

根据 @SSS 的说法，在元素被插入到DOM中之前，无法获得它的宽度。 - Adam Hopkinson

顺便说一句，在最新的 FF 中它也没有给出宽度。 - SSS

这个链接可以显示，而这个链接不能。因为在Chrome中，样式没有被正确渲染。 - Sandy

试试这个代码：$(document).ready(function() { $('body').append("<div class='testDiv'>Div Content</div>"); alert($(".testDiv").width()); }); - Pavlo

Answer 1

这可能是原因，如果您在 div 中有内联 css，它将正确显示您的宽度。可能是因为 Chrome 没有加载 css 属性。

<script>
    var div = "<div style='width:150px' class='testDiv'>Div Content</div>";

$(window).load(
   function() {
    alert($(div).width());
   }
); 
</script>

- sshet

---

谢谢@lampdev，我已经在更新中说过了，但这并不总是一个适当的解决方案。 - MD SHAHIDUL ISLAM

Answer 2

你可以尝试这样做：

var div = "<div class='testDiv'>Content</div>";
$(div).attr('id', 'test').css('position', 'fixed').appendTo('body');
console.log($("#test").width());
$("#test").remove();

这将为您提供宽度，而不会崩溃您的视图，您的div变量仍将具有正确的属性。

- Bartheleway

Answer 3

我认为你不能在Chrome中这样做，我相信有一个很好的解释，但我不知道。所以这是我的解决方案jsFiddle：将一个带有display:none的div附加到DOM中，当你有了宽度后再移除它。@lampdev给出的答案也是正确的，但它只从style属性中获取宽度。那不是计算出来的宽度，在许多情况下都会出错。

- thinklinux