Element width in chrome using jquery

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());

It may be because the div isnt present in the DOM yet. Try adding the div. Append()/ Prepend()/html() and then check the width — SSS, May 06 '14 at 09:12
As per @SSS, you won't get a width until the element is inserted into the DOM — Adam Hopkinson, May 06 '14 at 09:13
@SSS It gives it for me on FF 29.0 Win7. But anyway, OP should add element to the DOM before getting any size. He could find some workaround as using a clone DIV and appending it outside of viewport, get the size and then remove the cloned element. It looks like FF 29.0 is applying CSS rules even element not in DOM, quite new for me — A. Wolff, May 06 '14 at 09:18
this [Link](http://jsfiddle.net/W4Km8/491/) shows and this [Link](http://jsfiddle.net/W4Km8/490/) not. becoz in crome style not render first. — Sandy, May 06 '14 at 09:18
@SSS Apparently because you didn't read the first sentence. To the actual solution, if you can't add and remove the element at the same time you need to go through your CSS rules by iterating over `document.styleSheets`. You can get inspiration in this similiar topic: http://stackoverflow.com/questions/2952667/find-all-css-rules-that-apply-to-an-element — dan-lee, May 06 '14 at 09:22
@SSS Because your pointer has been assigned to Adam Hopkinson — Rajaprabhu Aravindasamy, May 06 '14 at 09:22
Try this one: `$(document).ready(function() { $('body').append("
Div Content
"); alert($(".testDiv").width()); });` — Pavlo, May 06 '14 at 09:25

score 0 · Answer 1 · answered May 06 '14 at 09:39

0

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>

answered May 06 '14 at 09:39

sshet

1,152
1
6
15

Thanks @lampdev I have said this already in update but its not a proper solution always – MD SHAHIDUL ISLAM May 06 '14 at 09:42

score 0 · Answer 2 · answered May 06 '14 at 09:45

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.

score 0 · Answer 3 · answered May 06 '14 at 09:55

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.

Element width in chrome using jquery

3 Answers3