个人中心
gpt4 book ai didi

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

转载 作者：太空狗 更新时间：2023-10-29 15:58:46 26 4
gpt4 key购买 nike

我有一个小工具可以尝试几个 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>

最佳答案

计算很好，不同之处在于您正在计算第一个的宽度，然后在其中添加一个内容，这会影响另一个。然后你对第二个做同样的事情，等等。

最后，它们在视觉上都将具有相同的 outerWidth1，因为它们具有相同的内容，但是在运行 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 个元素的情况下，只有 margin 受到影响，但是当涉及到更多元素时，由于收缩效果，内部宽度也可能受到影响:

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 :它是包括边距的宽度，因为您要将 true 添加到 jQuery 函数。

根据评论，这是您的原始代码示例，其中附加了带有宽度信息的 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>

关于javascript - 为什么 div 的测量宽度与浏览器测量不同？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51492965/

26 4 0
文章推荐： HTML
标签在 IE/Edge 中不起作用
文章推荐： android - Cordova 无法再构建发布
文章推荐： android - DataBinding ObserableField 不更新 View
文章推荐： c - 像宏这样的功能是什么意思？
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com