Question

我的div文件中有一个HTML，我通过divs在其中创建了更多Javascript。

以下是Javascript＆amp;我用来在父div中创建div的JQuery代码：

$(document).ready( function() {
    var parentDiv = document.getElementById('container');

    for(var i = 0; i < 20; i++){
       var div = document.createElement("div");
       div.setAttribute("id", "div" + i);
       div.innerHTML = i; 
       div.classList.add("square");
       parentDiv.appendChild(div);
       var widthDiv = $('#div' + i).width();
       console.log(widthDiv); //It returns 499 for the first element
    }
}

容器div是flex容器，他们的孩子也是flex。如果我在加载页面时检查Google Chrome的控制台，例如$('#div0').width()，则会得到100的值，这是正确的值。

如果我尝试检索刚刚附加到其父元素的元素的width值，为什么会得到不同的值？我该如何解决？

PS：我认为在我尝试阅读他们的属性之前，这些元素是不相关的，但后来我不明白为什么他们返回一个null或0的不同值intead。

编辑：正如下面的评论所述，我尽可能地简化了我的代码：

HTML 代码：

<div id="container"></div>

CSS 代码：

html,body{
  height: 100%;
}
body{
  margin: 0;
}
#container{
    display: flex;
    position: relative;
    flex-flow: row wrap;
    width: 100%;
    background-color:blue;
}
.square{
    flex: 1 0 20%;
    height: 30px;
    background-color: red;
}

提前致谢！

Answer 1

为什么此代码显示宽度的不同值？

实际上你在这里使用display:flex和你的div，而且他们没有固定的宽度所以对于每一个，宽度将是框宽+容器中的剩余宽度，这就是您总是得到值的原因：

对于一行中的每个元素，您都可以在控制台中看到它。

$(document).ready(function() {
  var parentDiv = document.getElementById('container');

  for (var i = 0; i < 20; i++) {
    var div = document.createElement("div");
    div.setAttribute("id", "div" + i);
    div.innerHTML = i;
    div.classList.add("square");
    parentDiv.appendChild(div);
    var widthDiv = $('#div' + i).width();
    console.log(widthDiv); //It returns 499 for the first element
  }
});

html,
body {
  height: 100%;
}
body {
  margin: 0;
}
#container {
  display: flex;
  position: relative;
  flex-flow: row wrap;
  width: 100%;
  background-color: blue;
}
.square {
  flex: 1 0 20%;
  height: 30px;
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container"></div>

<强>解释

然后你在循环中追加div，所以每次操作，可用宽度都会减小，每个创建的元素都会填充这个宽度，这样就可以解释你得到的不同值。

<强>参考：

如果您查看 the MDN CSS flex specification ，您可以看到：

flex CSS属性是一个速记属性，指定弹性项目改变其尺寸以填充可用空间的能力。

在.appendChild（）之后使用.width（）函数获取不同的值

1 个答案: