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

人们会认为在jQuery的后续位之后，由#foo选择的div的宽度根本不会改变;毕竟，我们这个宽度设置为它理应已经值：

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

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

<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 s结尾了相同的宽度。一方面，这很好：结果具有人们期望的外观。另一方面，jsFiddle的结果并不能代表浏览器直接产生的结果与jQuery的行为一样令人费解。

我的问题是：

这是jQuery中的错误，或者是这个令人费解的行为，不知何故与CSS规范协议？
为了让jsFiddle产生的结果看起来像浏览器产生的结果，需要做些什么？

编辑：我修改了JS（在上面链接页面和的jsfiddle，以及在这个岗位）来匹配，在马可Biscaro的答案给出;这对浏览器直接显示的页面外观没有影响，但它确实影响了jsFiddle结果的外观。现在后者显示在各种divs的宽度没有区别。这个结果仍然不同于浏览器直接生成的结果，所以情况并没有比以前好多了：我们仍然认为jQuery产生了令人惊讶的结果，并且jsFiddle产生的结果与浏览器的结果不匹配。

来源

2013-12-21 kjo

临死前张贴了“笑”，但我宁愿是建设性.. :) 难道你有一个窃听了CSS重置？尝试过不同的浏览器？某些浏览器倾向于计算宽度 –

您从不设置widht，因此jQuery试图获取它，并且可能使用outerWidth，因为它会获得包括填充的宽度。使用'$（'。jqbug'）。width（）'得到正确的值 – adeneo

@adeneo为什么不把它作为答案？对我来说似乎很合法。 –

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

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

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

该返回值应用为两个div的宽度，但由于一个div具有box-sizing: border-box而另一个div没有，所以一个div比另一个大。

jQuery将不会改变任何div的宽度，符合市场预期，如果你设置宽度为原始宽度和使用$(document).ready（http://bugs.jquery.com/ticket/14084）：

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

来源

2013-12-21 20:21:25

“jQuery不会改变任何div的宽度，正如所料”：这个断言在jsFiddle之外是不正确的;我更改了代码以匹配您发布的内容，第二个div的宽度更改了。看到我上面的编辑。 – kjo

@kjo它使用'$（document）.ready'。这是一个jQuery bug –

@ MarcoBiscaro：我不能够感谢你！今天我已经从一个无意义的情况转向另一个。你的文章是整天有意义的第一件事... – kjo

这个问题是由于第一个div在高级元素上具有不同宽度的css类边框而第二个元素在父元素没有设置边框的情况下引起的。

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

这会导致jquery设置的内联宽度被重写。

来源

2013-12-21 20:03:08

只取outerWidth，它会计算出实际的宽度包括填充和边界

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

来源

2013-12-21 20:29:05

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

回答

相关问题