Question

有人会认为，在jQuery的下一位之后，div选择的#foo的宽度根本不会改变;毕竟，我们将此宽度设置为它应该已经具有的值：

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

事实上，这种合理的猜测似乎是错误的，如page所示。我给出下面的代码。需要注意的重要一点是，对应于四个.level-0 div的四个主要部分都具有相同的结构和内容。它们中的第二个和第四个（具有jqbug类）的宽度“重新设置”（如上所述，具有一些JS）到它应该已经具有的值。对于第二种情况，通过此操作实际改变宽度;对于第四种情况，宽度保持不变，如预期的那样。第二个和第四个案例的定义之间的唯一区别是前者对border-box参数有box-sizing。

<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;
}

在此jsFiddle中，使用与上面所示完全相同的代码，所有div最终都具有相同的宽度。一方面，这很好：结果具有人们所期望的外观。另一方面，jsFiddle的结果不能代表浏览器直接生成的事实就像jQuery的行为一样令人费解。

我的问题是：

这是jQuery中的一个错误，还是这个令人费解的行为在某种程度上与CSS规范一致？
需要做些什么才能让jsFiddle产生的结果看起来像浏览器产生的结果？

Answer 1

你有两个不同的div具有相同的类。当你这样做时：

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

返回其中一个div的宽度（我不确切知道jQuery如何确定两个中的哪一个）。在您的托管页面中，返回的值为234px，而在jsFiddle中，值为274px（同样，我不确切知道原因）。这就是两个页面之间行为不同的原因。

此返回值将作为两个div的宽度应用，但因为一个div有box-sizing: border-box而另一个没有，所以一个div比另一个div大。

如果您将宽度设置为原始宽度并使用$(document).ready （http://bugs.jquery.com/ticket/14084），则jQuery不会像预期的那样更改任何div的宽度：

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

Answer 2

这个问题是由于第一个div在更高级别元素上具有css类border-box，而第二个元素的宽度与第二个元素不同，其中父元素没有设置border-box。 / p>

border-box上设置了框尺寸模型。这意味着它需要宽度+填充。

这会导致jquery设置的内联宽度被覆盖。

Answer 3

只需取外边宽度，它将计算实际宽度，包括填充和边框

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

为什么$（'＃foo'）。css（'width'，$（'＃foo'）。css（'width'））会改变宽度？

3 个答案: