gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 23:01:38 26 4
gpt4 key购买 nike

所以我一直在尝试制作一个网络应用程序,并认为拥有带有随机顶部填充的“卡片”会很酷。
这是我想要实现的屏幕截图:
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>
任何帮助表示赞赏:)

最佳答案

这是如何做到的。我用过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>

关于javascript - 有没有办法随机化 CSS/JavaScript 中的填充?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65375423/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com