Question

在追加到body之前我需要元素宽度。

以下脚本在firefox中工作正常但在google chrome

中没有

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

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

它在firefox中提供输出150，在chrome中提供0

我也试过

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

但它的工作原理相同......

更新

我可以看到，如果我声明css inline它有效，但我需要使用css class

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

Answer 1

这可能是原因，如果您的div中有内嵌css，它会正确显示您的宽度。可能css属性不会加载chrome

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

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

Answer 2

我认为你不能在Chrome中做到这一点，我确信有一个很好的解释，但我不知道。所以这是我对该问题的解决方案jsFiddle使用display:none将DOM附加到DOM，当您有宽度时将其删除。 @lampdev给出的答案也是正确的，但它只需要style属性的宽度。这不是计算出的宽度，在许多情况下都是错误的。

Answer 3

您可以尝试这样的事情：

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

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

使用jquery在chrome中的元素宽度

3 个答案: