Question

我有一个小的工具可以尝试一些flexbox参数。它可以从flexbox容器中添加和删除div，然后使用jQuery显示这些添加的元素的宽度。但是测量的宽度与我在浏览器检查器中测量的宽度不同。

使用“加号”和“减号”按钮，可以添加元素。第一个元素的宽度应该正确，但是后面的元素测量错误。这是怎么回事？

function getWidth() {
  // true: include margins
  var v = parseFloat($(this).outerWidth(true)).toFixed(2);
  var span = '<span>Width: ' + v + '</span>';
  
  console.log(v);
  $(this).html(span);
}

$(document).ready(function() {
  // Initialize.
  var items = 3;
  var itemsDiv = '<div class="item">';
  var HTML = '';
  for (var i = 0; i < items; i++) {
    HTML += itemsDiv + 'Item ' + i + '</div>';
  }
  $('.container').html(HTML)
  var adjustment;

  // Add / remove items
  // Always keep at least one flex item.
  $('input[name="build"]').click(function() {
    adjustment = $(this).val();
    if (adjustment == "plus") {
      items += 1;
    }
    if (adjustment == "minus") {
      if (items > 1) {
        items -= 1;
      }
    }
    HTML = '';
    for (var i = 0; i < items; i++) {
      HTML += itemsDiv + 'Item ' + i + '</div>';
    }
    $('.container').html(HTML);
    $('.item').each(getWidth);
  });

  // Flex direction
  // Select flex-direction radio buttons and get checked value.
  $('input[name="flex-direction"]').click(function() {
    var flexDirection = $('input[name="flex-direction"]:checked').val();
    $('.container').css('flex-direction', flexDirection);
  });

  // Flex wrap
  $('input[name="flex-wrap"]').click(function() {
    var flexWrap = $('input[name="flex-wrap"]:checked').val();
    $('.container').css('flex-wrap', flexWrap);
  })
})

body {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: row;
  height: 200px;
  width: 400px;
  border: 1px solid grey;
  margin: auto;
}

div.item {
  padding: 0;
  /* max-width: 80px; */
  height: 100px;
  margin: auto;
  border: 1px solid black;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="./flexbox.css">
  <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
  <script src="flexbox.js"></script>
</head>
<body>
  <div class="base">
    <input type="button" name="build" value="plus" id="plus">
    <input type="button" name="build" value="minus" id="minus">
    <div class="container"></div>
    Flex Direction
    <input type="radio" name="flex-direction" id="row" value="row" checked>
    <label for="row">Row</label>
    <input type="radio" name="flex-direction" id="column" value="column">
    <label for="column">Column</label>
    <input type="radio" name="flex-direction" id="row-reverse" value="row-reverse">
    <label for="row-reverse">Row-Reverse</label>
    <input type="radio" name="flex-direction" id="column-reverse" value="column-reverse">
    <label for="column-reverse">Column-Reverse</label>
    <br />
    <input type="radio" name="flex-wrap" id="nowrap" value="nowrap" checked>
    <label for="nowrap">No Wrap</label>
    <input type="radio" name="flex-wrap" id="wrap" value="wrap">
    <label for="wrap">Wrap</label>
    <input type="radio" name="flex-wrap" id="wrap-reverse" value="wrap-reverse">
    <label for="wrap-reverse">Wrap-Reverse</label>
  </div>
</body>
</html>

Answer 1

计算很好，不同之处在于您正在计算第一个的宽度，然后在其中添加了一个内容，这会影响另一个。然后，对第二个对象执行相同的操作，等等。

最后，它们在视觉上将具有相同的outerWidth ¹，因为在运行JS时它们具有相同的内容，但事实并非如此，您不会注意到这一点。

这是没有在元素中添加内容的代码，您可以清楚地看到所有日志给出相同的结果，仅仅是因为HTML在宽度计算过程中没有改变。

function getWidth() {
  // true: include margins
  var v = parseFloat($(this).outerWidth(true)).toFixed(2);
  var span = '<span>Width: ' + v + '</span>';
  
  console.log(v);
  //$(this).html(span);
}

$(document).ready(function() {
  // Initialize.
  var items = 3;
  var itemsDiv = '<div class="item">';
  var HTML = '';
  for (var i = 0; i < items; i++) {
    HTML += itemsDiv + 'Item ' + i + '</div>';
  }
  $('.container').html(HTML)
  var adjustment;

  // Add / remove items
  // Always keep at least one flex item.
  $('input[name="build"]').click(function() {
    adjustment = $(this).val();
    if (adjustment == "plus") {
      items += 1;
    }
    if (adjustment == "minus") {
      if (items > 1) {
        items -= 1;
      }
    }
    HTML = '';
    for (var i = 0; i < items; i++) {
      HTML += itemsDiv + 'Item ' + i + '</div>';
    }
    $('.container').html(HTML);
    $('.item').each(getWidth);
  });

  // Flex direction
  // Select flex-direction radio buttons and get checked value.
  $('input[name="flex-direction"]').click(function() {
    var flexDirection = $('input[name="flex-direction"]:checked').val();
    $('.container').css('flex-direction', flexDirection);
  });

  // Flex wrap
  $('input[name="flex-wrap"]').click(function() {
    var flexWrap = $('input[name="flex-wrap"]:checked').val();
    $('.container').css('flex-wrap', flexWrap);
  })
})

body {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: row;
  height: 200px;
  width: 400px;
  border: 1px solid grey;
  margin: auto;
}

div.item {
  padding: 0;
  /* max-width: 80px; */
  height: 100px;
  margin: auto;
  border: 1px solid black;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="./flexbox.css">
  <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
  <script src="flexbox.js"></script>
</head>
<body>
  <div class="base">
    <input type="button" name="build" value="plus" id="plus">
    <input type="button" name="build" value="minus" id="minus">
    <div class="container"></div>
    Flex Direction
    <input type="radio" name="flex-direction" id="row" value="row" checked>
    <label for="row">Row</label>
    <input type="radio" name="flex-direction" id="column" value="column">
    <label for="column">Column</label>
    <input type="radio" name="flex-direction" id="row-reverse" value="row-reverse">
    <label for="row-reverse">Row-Reverse</label>
    <input type="radio" name="flex-direction" id="column-reverse" value="column-reverse">
    <label for="column-reverse">Column-Reverse</label>
    <br />
    <input type="radio" name="flex-wrap" id="nowrap" value="nowrap" checked>
    <label for="nowrap">No Wrap</label>
    <input type="radio" name="flex-wrap" id="wrap" value="wrap">
    <label for="wrap">Wrap</label>
    <input type="radio" name="flex-wrap" id="wrap-reverse" value="wrap-reverse">
    <label for="wrap-reverse">Wrap-Reverse</label>
  </div>
</body>
</html>

现在，这是在仅计算第一个元素的宽度之后将其添加到第一个元素内时的状态。我们可以清楚地看到，元素之间的结构不同，边距也不相同，因此第二个元素的outerWidth会有所不同。

body {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: row;
  height: 200px;
  width: 400px;
  border: 1px solid grey;
  margin: auto;
}

div.item {
  padding: 0;
  /* max-width: 80px; */
  height: 100px;
  margin: auto;
  border: 1px solid black;
}

All the elements have the same outerwidth here
<div class="container">
  <div class="item">Item 0</div>
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
We add the width calculation inside the first one and the margin will be reduced so the next one will be different
<div class="container">
  <div class="item"><span>Width: 100.66</span></div>
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

以下是接下来的状态，您可以清楚地看到效果。

使用的值是简单占位符

body {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: row;
  height: 200px;
  width: 400px;
  border: 1px solid grey;
  margin: auto;
}

div.item {
  padding: 0;
  /* max-width: 80px; */
  height: 100px;
  margin: auto;
  border: 1px solid black;
}

<div class="container">
  <div class="item"><span>Width: 100.66</span></div>
  <div class="item"><span>Width: 100.66</span></div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
<div class="container">
  <div class="item"><span>Width: 100.66</span></div>
  <div class="item"><span>Width: 100.66</span></div>
  <div class="item"><span>Width: 100.66</span></div>
  <div class="item">Item 3</div>
</div>
<div class="container">
  <div class="item"><span>Width: 100.66</span></div>
  <div class="item"><span>Width: 100.66</span></div>
  <div class="item"><span>Width: 100.66</span></div>
  <div class="item"><span>Width: 100.66</span></div>
</div>

在具有4个元素的情况下，仅会影响边距，但是当涉及更多元素时，由于收缩效果，内部宽度也可能会受到影响：

body {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: row;
  height: 200px;
  width: 400px;
  border: 1px solid grey;
  margin: auto;
}

div.item {
  padding: 0;
  /* max-width: 80px; */
  height: 100px;
  margin: auto;
  border: 1px solid black;
}

<div class="container">
  <div class="item">Item 0</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
</div>
<div class="container">
  <div class="item">Width 100</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
  <div class="item">Item 1</div>
</div>

如果要进行准确的计算，应避免在执行计算时更改HTML内容和DOM结构。您可以在计算之前和之后进行更新，但不能在计算中间进行更新，方法是添加内容。

^{1：这是宽度，包括边距，因为您要向jQuery函数添加true。}

基于注释，这是原始代码的示例，其中带有宽度信息的span被附加，并绝对位于底部。这样就不会影响计算值。

堆栈片段

function getWidth() {
  // true: include margins
  var v = parseFloat($(this).outerWidth(true)).toFixed(2);
  var span = '<span>Width: ' + v + '</span>';
  
  //console.log(v);
  $(this).append(span);
}

$(document).ready(function() {
  // Initialize.
  var items = 3;
  var itemsDiv = '<div class="item">';
  var HTML = '';
  for (var i = 0; i < items; i++) {
    HTML += itemsDiv + 'Item ' + i + '</div>';
  }
  $('.container').html(HTML)
  var adjustment;

  // Add / remove items
  // Always keep at least one flex item.
  $('input[name="build"]').click(function() {
    adjustment = $(this).val();
    if (adjustment == "plus") {
      items += 1;
    }
    if (adjustment == "minus") {
      if (items > 1) {
        items -= 1;
      }
    }
    HTML = '';
    for (var i = 0; i < items; i++) {
      HTML += itemsDiv + 'Item ' + i + '</div>';
    }
    $('.container').html(HTML);
    $('.item').each(getWidth);
  });

  // Flex direction
  // Select flex-direction radio buttons and get checked value.
  $('input[name="flex-direction"]').click(function() {
    var flexDirection = $('input[name="flex-direction"]:checked').val();
    $('.container').css('flex-direction', flexDirection);
  });

  // Flex wrap
  $('input[name="flex-wrap"]').click(function() {
    var flexWrap = $('input[name="flex-wrap"]:checked').val();
    $('.container').css('flex-wrap', flexWrap);
  })
})

body {
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: row;
  height: 200px;
  width: 400px;
  border: 1px solid grey;
  margin: auto;
}

div.item {
  position: relative;
  padding: 0;
  /* max-width: 80px; */
  height: 100px;
  margin: auto;
  border: 1px solid black;
}

div.item span {
  position: absolute;
  left: 0; bottom: 0;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="./flexbox.css">
  <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
  <script src="flexbox.js"></script>
</head>
<body>
  <div class="base">
    <input type="button" name="build" value="plus" id="plus">
    <input type="button" name="build" value="minus" id="minus">
    <div class="container"></div>
    Flex Direction
    <input type="radio" name="flex-direction" id="row" value="row" checked>
    <label for="row">Row</label>
    <input type="radio" name="flex-direction" id="column" value="column">
    <label for="column">Column</label>
    <input type="radio" name="flex-direction" id="row-reverse" value="row-reverse">
    <label for="row-reverse">Row-Reverse</label>
    <input type="radio" name="flex-direction" id="column-reverse" value="column-reverse">
    <label for="column-reverse">Column-Reverse</label>
    <br />
    <input type="radio" name="flex-wrap" id="nowrap" value="nowrap" checked>
    <label for="nowrap">No Wrap</label>
    <input type="radio" name="flex-wrap" id="wrap" value="wrap">
    <label for="wrap">Wrap</label>
    <input type="radio" name="flex-wrap" id="wrap-reverse" value="wrap-reverse">
    <label for="wrap-reverse">Wrap-Reverse</label>
  </div>
</body>
</html>

为什么div的测量宽度与浏览器测量不同？

1 个答案: