使用jquery在chrome中的元素宽度

Question

I need element width before appending to body.

Following scripts is working fine in firefox but not in google chrome

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

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

It gives output 150 in firefox and 0 in chrome

I have tried also

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

But it is working same...

UPDATE:

I can see, if I declare css inline it works but it is needed to me using css class

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

Answer 1

This may be the reason , if you have in-line css in your div say, it will display your width properly. probably css properties does not load in chrome

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

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

Answer 2

I think you can't do that in Chrome and I'm sure there is a good explanation but I don't know it. So here is my solution to that problem jsFiddle Append a div to the DOM with display:none and when you have the width remove it. The answer which @lampdev gave is also correct but it takes just the width from the style attribute. That is not the computed width and it will be wrong in many cases.

Answer 3

You could try something like this:

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

This will give you the width without crashing your view and your div variable will still have the correct properties.