使用jquery的chrome中的元素宽度

Posted 2023-02-22

【中文标题】使用jquery的chrome中的元素宽度

【英文标题】：Element width in chrome using jquery

【发布时间】：2014-06-22 19:31:29

【问题描述】：

在添加到正文之前我需要元素宽度。

以下脚本在 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());

【问题讨论】：

这可能是因为 div 还没有出现在 DOM 中。尝试添加 div。 Append()/ Prepend()/html() 然后检查宽度

根据@SSS，在将元素插入 DOM 之前，您不会获得宽度

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

@SSS 它在 FF 29.0 Win7 上为我提供。但无论如何，OP 应该在获取任何大小之前将元素添加到 DOM。他可以找到一些解决方法，例如使用克隆 DIV 并将其附加到视口之外，获取大小，然后删除克隆的元素。看起来 FF 29.0 正在应用 CSS 规则，甚至元素不在 DOM 中，对我来说很新

这个Link 显示，这个Link 没有。因为在 crom 风格中没有先渲染。

【参考方案1】：

你可以试试这样的：

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

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

【参考方案2】：

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

【参考方案3】：

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

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

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

【讨论】：

谢谢@lampdev 我已经在更新中说过了，但它始终不是一个合适的解决方案