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

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';

标签： javascriptcss

Answer 1

代码有两个问题：

1. 要使用 use 获取元素，.clientWidth因为style.width可以在您设置它但在您的代码中访问时，我看不到您这样做。
2. 第二次使用百分比字体大小，我不认为 line-height 是必需的。要使其居中，请使用 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; 
    }