如何在JavaScript中将window.innerWidth除以div.style.width？

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中将window.innerWidth除以div.style.width？

How to divide window.innerWidth by div.style.width in JavaScript?

javascript

font-size