Question

我正在尝试在屏幕上创建div。我希望div的数量等于屏幕的宽度（1920px）/ 1em（字体大小宽度）。我遇到了困难，我不知道自己做错了什么。

function main(){
  var div = document.createElement('div');
  div.style.width = '1em';
  div.style.height = '1em';
  div.style.background = 'red';
  i = 0;
  while(i < (window.innerWidth / div.style.width)){
    document.body.appendChild(div);
    i++;
  }
}
main();

Answer 1

您可以尝试以下代码根据屏幕宽度创建div。您必须使用

将1em值转换为px

var em = parseFloat（getComputedStyle（document.documentElement）.fontSize）;

function main() {
  var em = parseFloat(getComputedStyle(document.documentElement).fontSize);
  console.log(window.innerWidth, em, (window.innerWidth / em))
  for (i = 0; i < (window.innerWidth / em); i++) {
    var div = document.createElement('div');
    div.style.width = '1em';
    div.style.height = '1em';
    div.style.background = 'red';
    document.body.appendChild(div);
  }
}
window.onload = function() {
  main();
};

div {
  margin-bottom: 1px;
}

<body id="body"></body>

如何在JavaScript中用div.style.width划分window.innerWidth？

1 个答案: