时间戳

首页 > 解决方案 > 使第n个孩子成为CSS中的随机变量

css - 使第n个孩子成为CSS中的随机变量

问题描述

我想为 css 中的 n 分配一个随机值。理想情况下没有javascript（并且有关于如何在各种帖子中执行此操作的建议，但我不知道如何将javascript插入css，因为第n个子元素似乎只接受'odd'，'even''n'或数值。

代码原样：

.gallery > .gallery__list > li:nth-child(4n) {
grid-column: span 3; /* Spans two columns */
grid-row: span 3; /* Spans two rows */
}

我只是想要 '4' 到 1 到 5 之间的随机值，所以它有时可能是 2n，其他可能是 3n。

标签： css

解决方案

这对于 CSS 是不可能的——它是一种样式语言，而不是一种编程语言，并且没有能力“运行”任何代码。但是，对于JS ，它相对简单。我最初将选择器误读为 just 4， not 4n，这使事情变得更加复杂：

const listItems = document.querySelectorAll('.gallery > .gallery_list > li');
const separator = Math.ceil(Math.random() * 4);

listItems.forEach((item, i) => {
  if ((i + 1) % separator === 0) {
    item.classList.add('span-3');
  }
});
.span-3 {
  grid-column: span 3;
  grid-row: span 3;
  color: red;
}
<div class="gallery">
  <ul class="gallery_list">
    <li>Item One</li>
    <li>Item Two</li>
    <li>Item Three</li>
    <li>Item Four</li>
    <li>Item Five</li>
    <li>Item Six</li>
    <li>Item Seven</li>
    <li>Item Eight</li>
    <li>Item Nine</li>
    <li>Item Ten</li>
  </ul>
</div>

此代码将：

  1. li以与 CSS 相同的方式从直接路径中选择所有。
  2. 生成一个 1-5 之间的随机数。Math.random返回一个介于 0 和小于 1 之间的随机浮点数，因此必须进行调整。
  3. 循环遍历li元素列表。
  4. 如果索引i（从 0 开始）加 1 除以随机数，没有余数（我们使用模运算符得到%），那么它应该被设置样式。
  5. 添加一个包含相关样式的类。我将其从使用 etc 直接修改内联样式进行了更改，style.gridColumn因为这使其可重用且更易于切换。

将 JS 包含在 HTML 内的标记中，或者理想情况下包含在脚本标记属性script引用的单独文件中。src

推荐阅读