javascript - 使用 div 的简单图表

Question

我正在使用以下内容制作图表

for(let i=0;i<1000;i++){
  let rect = document.createElement('div')
  rect.style.backgroundColor = '#dd21d1'
  rect.style.height = Math.random() +'px'
  rect.style.width='.5px'
  rect.style.transform = `scaleY(100) translateX(${i}px)`
  document.body.appendChild(rect)
}

然而，即使我的 y 坐标始终为零，至少我是这么认为的，而不是在一行中看到矩形，而是它们似乎是垂直添加的，知道为什么会这样吗？

Answer 1

默认情况下，Div 有display: block，这将使它们将其他内容推到下一行。您可以通过将这些 div 设置为 inline-block 来解决此问题，方法是在附加到正文之前添加以下行:

rect.style.display = 'inline-block'

整个代码段将更新为如下所示:

for(let i=0;i<1000;i++){
  let rect = document.createElement('div')
  rect.style.backgroundColor = '#dd21d1'
  rect.style.height = Math.random() +'px'
  rect.style.width='.5px'
  rect.style.transform = `scaleY(100) translateX(${i}px)`
  rect.style.display = 'inline-block'
  document.body.appendChild(rect)
}