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

Question

我正在学习 css-grids 和 JavaScript。 我想知道是否可以根据该类是否有偶数或奇数个 div 来更改 :last-of-type 元素的 grid-template-columns minmax 值。 我在 css-tricks 文章中从 Juan Martín Garcí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 元素的数量是奇数，请使用 :last-of-type 更改最后一个 .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;
}

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

Answer 1

您可以使用querySelectorAll ，它将返回您的选择器指向的所有 HTML 元素，然后获取NodeList上的最后一个元素

const allCards = document.querySelectorAll(".card");
const lastCard = allCards[allCards.length - 1];

lastCard.style.gridTemplateColumns = "whatever you need it to be"