Why does $('#foo').css('width', $('#foo').css('width')) change the width?

Question

One would think that after the following bit of jQuery, the width of the div selected by #foo would not change at all; after all, we are setting this width to the value it supposedly already has:

var original_width = $('#foo').css('width');
$('#foo').css('width', original_width);

In fact, this reasonable guess appears to be wrong, as shown in this page. I give the code below. The important thing to note is that the four main sections, corresponding to the four .level-0 divs, all have the same structure and content. The second and fourth of them (which have the jqbug class) have their width "re-set" (with a bit of JS, as described above) to the value it supposedly already has. For the second one case, the width is actually changed by this operation; for the fourth case, the width remains unchanged, as expected. The only difference between the definitions of the second and fourth cases is that the former has border-box for its box-sizing parameter.

<div class="level-0 border-box">
    <div id="i1" class="level-1">
      <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>

<div class="level-0 border-box">
    <div class="level-1 jqbug">
      <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>

<div class="level-0">
    <div id="i1" class="level-1">
      <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>

<div class="level-0">
    <div class="level-1 jqbug">
      <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js">
</script>

  (function ($) {
    $('.jqbug').each(function () {
      $(this).css('width', $(this).css('width'));
    });

  }(jQuery));

*{
  outline:3px solid green;
}

.border-box, .border-box *{
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
}

.level-0{
  position:relative;
  margin:10px auto;
  width:300px;
  height:100px;
  font-family:consolas,monaco,courier,monospace;
}
.level-1{
  position:absolute;
  padding:10px 20px;
  background-color:#0aa;
  font-size:15px;
}

In this jsFiddle, which uses exactly the same code as shown above, all the divs end up with the same width. On the one hand, this is good: the results have the appearance one would expect. On the other hand, the fact that jsFiddle's result is not representative of what the browser produces directly is just as puzzling as jQuery's behavior.

My questions are:

Is this a bug in jQuery, or is this puzzling behavior somehow in agreement with the CSS spec?
What does one need to do to get the result produced by jsFiddle to look like that produced by the browser?

EDIT: I modified the JS (in both the page linked above and the jsFiddle, as well as in this post) to match that given in Marco Biscaro's answer; this made no difference to the appearance of the page as displayed directly by the browser, but it did affect the appearance of the jsFiddle's result. Now the latter shows no difference in the widths of the various divs. This result still differs from that produced directly by the browser, so the situation is not much better than it was before: we still have that jQuery produces surprising results, and jsFiddle produces results that do not match the browser's results.

was dying to post a "lol" but I rather be constructive.. :) Could it be you have a bugged up css reset? Tried it with different browsers? Some browsers tends to do calculated widths — Oliver M Grech
– Oliver M Grech, Commented Dec 21, 2013 at 19:56
You never set the widht, so jQuery tries to get it anyway, and probably uses outerWidth as it gets the width including the padding. Using $('.jqbug').width() gets the correct value — adeneo
– adeneo, Commented Dec 21, 2013 at 19:57
@adeneo Why don't you post that as an answer? Seems pretty legit to me. — Matt Kieran
– Matt Kieran, Commented Dec 21, 2013 at 20:02

Marco Biscaro · Accepted Answer · 2013-12-21 21:16:12Z

1

You have two different divs with the same class. When you do:

$('.jqbug').css('width')

The width of one of the divs is returned (I don't know exactly how jQuery determines which of two). In your hosted page, the value returned is 234px while in jsFiddle the value is 274px (again, I don't know exactly why). This is why the behaviour is different between the two pages.

This returned value is applied as width of both divs, but because one div has the box-sizing: border-box and the other hasn't, one div gets bigger than the other.

jQuery won't change the width of any div, as expected, if you set the width as the original width and use $(document).ready (http://bugs.jquery.com/ticket/14084):

$(document).ready(function () {
    $('.jqbug').each(function () {
        $(this).css('width', $(this).css('width'));
    });
});

edited Dec 21, 2013 at 21:16

answered Dec 21, 2013 at 20:21

Marco Biscaro

1,27811 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

kjo Over a year ago

"jQuery won't change the width of any div, as expected": this assertion is incorrect outside of jsFiddle; I changed the code to match what you posted, and the second div still has its width changed. See my EDIT above.

Marco Biscaro Over a year ago

@kjo It works if using $(document).ready. It's a jQuery bug

kjo Over a year ago

@ MarcoBiscaro: I can't thank you enough! Today I've been going from one nonsensical situation to another. Your post is the first thing made sense all day...

Captain John · Accepted Answer · 2013-12-21 20:03:08Z

0

This problem is caused by the fact that the first div has the css class border-box on the higher level element which has a different width vs the second element where the parent element does not have border-box set on it.

border-box has the box sizing model set on it. This means it takes the width+padding.

This causes the inline width set by jquery to be overriden.

answered Dec 21, 2013 at 20:03

Captain John

2,0112 gold badges19 silver badges34 bronze badges

Comments

john Smith · Accepted Answer · 2013-12-21 20:29:05Z

0

Just take the outerWidth, it will calculate the actual width including padding and border

var original_width = $('#foo').outerWidth();

answered Dec 21, 2013 at 20:29

john Smith

18k12 gold badges80 silver badges124 bronze badges

Collectives™ on Stack Overflow

Why does $('#foo').css('width', $('#foo').css('width')) change the width?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related