Question

我正在学习css-grids和javascript。我想知道是否有可能基于该类的div的偶数或奇数来更改：last-of-type元素的grid-template-columns minmax值。我在CSS技巧文章中从JuanMartínGarcía克隆了网格布局的示例。这是HTML：

<section class="breweries" id="breweries">
    <ul id="cardContainer">
      <li class="card">
        <figure>
          <img src="https://images.unsplash.com/photo-1489993360877-883980cc7333?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" alt="Several hands holding beer glasses">
          <figcaption><h3>Billions upon billions</h3></figcaption>
        </figure>
        <p>
          Made in the interiors of collapsing stars star stuff harvesting star light venture billions upon billions Drake Equation brain is the seed of intelligence?
        </p>
        <a href="#">Visit Website</a>
      </li>
      <li class="card">
        <figure>
          <img src="https://images.unsplash.com/photo-1455620611406-966ca6889d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1430&q=80" alt="Several friends doing a toast">
          <figcaption><h3>Drake Equation</h3></figcaption>
        </figure>
        <p>
          Another world citizens of distant epochs from which we spring descended from astronomers Orion's sword shores of the cosmic ocean.
        </p>
        <a href="#">Visit Website</a>
      </li>
      <li class="card">
        <figure>
          <img src="https://images.unsplash.com/photo-1460627390041-532a28402358?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Three different glasses of beer">
          <figcaption><h3>Vast cosmic arena</h3></figcaption>
        </figure>
        <p>
          Galaxies the ash of stellar alchemy prime number science inconspicuous motes of rock and gas brain is the seed of intelligence.
        </p>
        <a href="#">Visit Website</a>
      </li>
    </ul>
  </section>

这是CSS：

/* breweries styles */
.breweries {
  padding: 2rem;
}

.breweries > ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 1rem;
}

.breweries > ul > li {
  border: 1px solid #E2E2E2;
  border-radius: .5rem;
}

.breweries > ul > li > figure {
  max-height: 220px;
  overflow: hidden;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
  position: relative;
}

.breweries > ul > li > figure > img {
  width: 100%;
}

.breweries > ul > li > figure > figcaption {
  position: absolute;
  bottom: 0;
  background-color: rgba(0,0,0,.7);
  width: 100%;
}

.breweries > ul > li > figure > figcaption > h3 {
  color: white;
  padding: .75rem;
  font-size: 1.25rem;
}

.breweries > ul > li > p {
  font-size: 1rem;
  line-height: 1.5;
  padding: 1rem .75rem;
  color: #666666;
}

.breweries > ul > li > a {
  padding: .5rem 1rem;
  margin: .5rem;
}

使用规则grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));对于.cardContainer，如果屏幕宽度减小到1055px，则最后一个宽度为350px的.card li元素的左侧将剩下350px的尾随空格。

我想使用javascript首先检查.card元素是否为奇数或偶数，并且如果.card元素为奇数nr，请使用：last-of-更改最后一个.card元素的宽度。类型，然后对其进行设置，以使其占用.cardContainer ul元素中剩余的所有可用空间。

这是我的javascript：

let parent = document.getElementById("cardContainer");
let nodesSameClass = parent.getElementsByClassName("card");
console.log(nodesSameClass.length);

function isEven(card) {
    if (card%2 == 0)
        return true;
    else
        return false;
}

这就是我设法做到的程度。我想了解如果返回false且.card li元素数量奇数时，如何更改else语句。因此，我可以填充剩余空间，最后一个.card元素将填充.cardContainer ul元素中的所有可用空间。

谢谢：）

根据类的偶数或奇数用js更改CSS

0 个答案: