Question

该脚本会创建一个随机数的div（范围为20-40），并在每个div中放入一些文本。该脚本计算div的宽度，以使其适合于单行。高度应等于宽度-每个div必须为正方形。这是代码：

var quantity = Math.floor(Math.random() * (40 - 20 + 1)) + 20;


for (var i = 0; i < quantity; i++) {
  var elem = document.createElement("div");
  elem.className = "part";
  elem.id = 'p' + i;
  document.getElementById("scale").appendChild(elem);
}

var parts = document.getElementsByClassName("part");

for (var i = 0; i < parts.length; i++) {
  parts[i].style.fontSize = (500 / quantity) + 'px';
  parts[i].style.lineHeight = (460 / quantity) + 'px';

  parts[i].textContent = ("block #" + (i + 1));
}

for (var i = 0; i < parts.length; i++) {
  parts[i].style.height = parts[i].style.width;
}

let text = document.getElementById('txt');
text.textContent = 'BLOCKS: ' + quantity;

body {
  margin: 0;
}

#scale {
  position: absolute;
  display: table;
  width: 100%;
  top: 50%;
  transform: translateY(-100%);
  table-layout: fixed;
  border-spacing: 1px;
}

.part {
  display: table-cell;
  background-color: #a9cce3;
  padding: 3px;
  box-sizing: border-box;
  border: 1px solid black;
  border-radius: 2px;
  overflow: hidden;
}

#txt {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 20px;
  transform: translateX(-50%);
  font-size: 18px;
  font-family: 'Arial', sans-serif;
}

<div id="scale"> </div>

<div id='txt'> </div>

第一个问题是div并不总是方形的。第二个问题是我无法根据div大小正确设置字体大小，因此文本适合div。我认为这是最糟糕的解决方案

parts[i].style.fontSize = (500 / quantity) + 'px';
parts[i].style.lineHeight = (460 / quantity) + 'px';

Answer 1

代码有两个问题：

要使用.clientWidth来获取元素，因为style.width可以在设置时访问，但是在您的代码中，我看不到您正在这么做。
第二个使用字体大小的百分比，我认为行高不是必需的。要使其居中，请按照以下示例使用CSS。

使用以下内容：

var quantity = Math.floor(Math.random() * (40 - 20 + 1)) + 20;


for (var i = 0; i < quantity; i++) {
  var elem = document.createElement("div");
  elem.className = "part";
  elem.id = 'p' + i;
  document.getElementById("scale").appendChild(elem);
}

var parts = document.getElementsByClassName("part");

for (var i = 0; i < parts.length; i++) {
  parts[i].style.fontSize = (500 / quantity) + '%';
  parts[i].style.lineHeight = (460 / quantity) + '%';

  parts[i].textContent = ("block #" + (i + 1));
}

for (var i = 0; i < parts.length; i++) {
  parts[i].style.height = parts[i].clientWidth + "px";
}

let text = document.getElementById('txt');
text.textContent = 'BLOCKS: ' + quantity;

body {
  margin: 0;
}

#scale {
  position: absolute;
  display: table;
  width: 100%;
  top: 50%;
  transform: translateY(-100%);
  table-layout: fixed;
  border-spacing: 1px;
}

.part {
  display: table-cell;
  background-color: #a9cce3;
  padding: 3px;
  box-sizing: border-box;
  border: 1px solid black;
  border-radius: 2px;
  overflow: hidden;
  vertical-align: middle;
  text-align: center;
}

#txt {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: 20px;
  transform: translateX(-50%);
  font-size: 18px;
  font-family: 'Arial', sans-serif;
}

<div id="scale"> </div>

<div id='txt'> </div>

或者如果您不想像这样使用文本字体来减少字体，请使用以下命令：

.part {
      display: table-cell;
      background-color: #a9cce3;
      padding: 3px;
      box-sizing: border-box;
      border: 1px solid black;
      border-radius: 2px;
      overflow: hidden;
      vertical-align: middle;
      text-align: center;
       text-overflow: ellipsis;
       overflow: hidden;
      white-space: nowrap; 
    }

自定义动态创建的DIV的外观

1 个答案: