Javascript 使用jquery的chrome中的元素宽度

在附加到主体之前，我需要元素宽度

以下脚本在

firefox

中运行良好，但在

GoogleChrome

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

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

但它的工作原理是一样的

更新：

我可以看到，如果我声明

css内联

它可以工作，但是使用

css类

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

var div=“div Content”；
警报（$（div.width（））；

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

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

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

var div=“div内容”；
$（窗口）。加载(
函数（）{
警报（$（div.width（））；
}
); 

我想你在Chrome上做不到这一点，我相信有一个很好的解释，但我不知道。下面是我对这个问题的解决方案，使用

display:none

将div附加到DOM中，并在具有宽度时将其删除。@lampdev给出的答案也是正确的，但它只取style属性的宽度。这不是计算的宽度，在许多情况下都是错误的。

您可以尝试以下方法：

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

var div=“Content”；
$（div）.attr（'id'，'test'）.css（'position'，'fixed'）.appendTo（'body'）；
console.log（$（“#test”）.width（）；
$（“#测试”）.remove（）；

---

这将在不破坏视图的情况下为您提供宽度，并且您的div变量仍将具有正确的属性。

这可能是因为该div尚未出现在DOM中。请尝试添加div.Append（）/Prepend（）/html（），然后根据@SSS检查宽度，直到元素插入到DOM中，您才能获得宽度，顺便说一句，在最新的FF中，它也没有给出宽度。@SSS它在FF 29.0 Win7上为我提供了宽度。但无论如何，OP应该在获得任何大小之前将元素添加到DOM中。他可以找到一些解决方法，比如使用克隆DIV并将其附加到viewport之外，获得大小，然后删除克隆元素。看起来FF 29.0正在应用CSS规则，即使元素不在DOM中，这对于methis显示来说是非常新的，而这并不是。因为crome风格的becoz不会首先渲染。谢谢@lampdev，我已经说过这已经在更新中了，但它不是一个合适的解决方案

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