jQuery元素宽度计算不正确

Question

拥有简单的 html 代码

<div id="header">
  <div id="headerBox">
    <div id="headerText">
    </div>
  </div>
</div>

css 样式

div#header {
    display: block;
    overflow: hidden;    
    margin: 0;
    padding: 0;
    width: 100%;
}
div#headerBox {
    padding: 1em;
    text-align: center;
    white-space: nowrap;
    border-bottom: 10px double gray;
}
div#headerText {
    background: red;
    display: inline-block;
}

和 jQuery （2.x边缘）

function resize(win) {
  var size;
  var w = $('#headerBox').width();
  $('#headerText').html('');
  $('#headerBox').css('font-size', 1 + 'px');
  $('#headerText').html(
    "width of <span style=\"font-size:2em;\">headerBox</span> element is " + w + "px");
  while ($('#headerText').width() <= w) {
    size = parseInt($('#headerBox').css('font-size').replace(/\D+$/, ''), 10);
    $('#headerBox').css('font-size', (size + 1) + 'px');
  }
  $('#headerBox').css('font-size', size + 'px');
}

$(window).resize(function(e){
  resize(this)
});

resize(window);

可以通过 this fiddle ，

一起访问

我遇到不正确的jQuery元素宽度计算。当您访问上述小提琴时，您会发现headerText元素太宽。左边应该有相同的右边填充，文本应该居中。一旦调整 结果窗口（在小提琴中），文本就会调整为。

问题是为什么第一次出现错误计算？

似乎var w = $('#headerBox').width();计算错误。的 WHY吗

---

Answer 1

发现问题：

由于 headerBox 的padding: 1em;，此元素的宽度随font-size的变化而变化。

所以在while循环中我需要处理最新信息，而不是我在开头存储的信息。

因此

var w = $('#headerBox').width();
...
while ($('#headerText').width() <= w) {
  ...
}

需要更改为

while ($('#headerText').width() <= $('#headerBox').width()) {
  ...
}

Answer 2

JQuery .width不包含#headerbox的填充。使用.outerWidth获取正确的宽度。

var w = $('#headerBox').outerWidth();