时间戳

首页 > 解决方案 > 有没有办法随机化 CSS/JavaScript 中的填充？

javascript - 有没有办法随机化 CSS/JavaScript 中的填充？

问题描述

所以我一直在尝试制作一个网络应用程序，并认为拥有带有随机顶部填充的“卡片”会很酷。

这是我想要实现的屏幕截图：

https://imgur.com/FyKHfRV

这就是我所拥有的：

https://imgur.com/JkaUGQp

这是我尝试使用的 JavaScript，但失败了。

document.getElementById("card").addEventListener("load", randomCards);
let root = document.card;

function randomCards() {
    root.style.setProperty('cardpadding-top', Math.floor(Math.random() * 6) + "px");
});

这是HTML：

<body>
    <div class="scroll-wrap">
        <div id="card"></div>
        <div id="card"></div>
        <div id="card"></div>
        <div id="card"></div>
        <div id="card"></div>
    </div>
</body>

任何帮助表示赞赏:)

标签： javascripthtmlcssuser-interface

解决方案

这是如何做到的。我已经使用class="card"而不是id并且也用于querySelectorAll()获取所有卡片并遍历每个卡片并使用随机设置样式Math.random()。

document.querySelectorAll(".card").forEach(card=>{
  card.style.paddingTop = Math.floor(Math.random() * 20) + "px"
})

工作代码演示：

document.querySelectorAll(".card").forEach(card=>{
  card.style.paddingTop = Math.floor(Math.random() * 20) + "px"
})
.scroll-wrap{ height:400px; display:flex; align-items:center}
.card{
  height:100px;
  width:100px;
  background:blue;
  display:inline-block;
  margin:0 5px;
}
<div class="scroll-wrap">
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
        <div class="card"></div>
    </div>

推荐阅读