如何从滑块的 DOM 中获取元素

Question

我想为滑块的第一个和最后一个元素（5 个活动元素）设置样式。我有代码，但问题在于我无法获得这两个元素。

我用过这个（是的，我用的是光滑的滑块）

var sliderTour = document.getElementById("slider-tour");
var slickActive = sliderTour.getElementsByClassName("slick-active");

但我只得到 HTMLCollection []，当我使用

var first = slickActive[0];
var last = slickActive[slickActive.length - 1];
console.log(first, last);

我为 slider 的活动元素的第一项和最后一项设置未定义且无法设置样式

还有一些 slider 的 html 代码

<section class="slider-tour" id="slider-tour">
 <div class="slicker-booking slick-initialized slick-slider">
  <div class="slick-list draggable">
   <div class="slick-track">
     <div class="slider-item slick-slide slick-cloned"></div>
     <div class="slider-item slick-slide slick-cloned"></div>
     <div class="slider-item slick-slide slick-cloned"></div>
     <div class="slider-item slick-slide slick-cloned"></div>
     <div class="slider-item slick-slide slick-active"></div>
     <div class="slider-item slick-slide slick-active"></div>
     <div class="slider-item slick-slide slick-active"></div>
     <div class="slider-item slick-slide slick-active"></div>
     <div class="slider-item slick-slide slick-active"></div>
     <div class="slider-item slick-slide slick-cloned"></div>
     <div class="slider-item slick-slide slick-cloned"></div>
   </div>
  </div>
 </div>
</section>

我想获取第一个和最后一个元素并将它们设置为 css 风格，如背景不透明

.slick-active:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    opacity: 0.2;
    z-index: 10;
}

如果你有更简单的方法来设置我想要的背景，你可以说它而不是我的方式。 谢谢

Answer 1

但我只得到 HTMLCollection

使用该代码和标记，你甚至不应该得到那个，你应该得到一个错误。 您使用了getElementById但该元素没有id ，它有一个class 。

您可以通过querySelectorAll获取带有 class slider-tour的第一个元素，然后通过querySelector获取其中的所有 slick slick-active元素：

const active = document.querySelector(".slider-tour").querySelectorAll(".slick-active");
const first = active[0];
const last = active[active.length - 1];

现场示例：

 const active = document.querySelector(".slider-tour").querySelectorAll(".slick-active"); const first = active[0]; const last = active[active.length - 1]; first.style.color = "green"; last.style.color = "blue";

 Note I've put text in the active elements so you can see the color change I'm applying via JavaScript: <section class="slider-tour"> <div class="slicker-booking slick-initialized slick-slider"> <div class="slick-list draggable"> <div class="slick-track"> <div class="slider-item slick-slide slick-cloned"></div> <div class="slider-item slick-slide slick-cloned"></div> <div class="slider-item slick-slide slick-cloned"></div> <div class="slider-item slick-slide slick-cloned"></div> <div class="slider-item slick-slide slick-active">a0</div> <div class="slider-item slick-slide slick-active">a1</div> <div class="slider-item slick-slide slick-active">a2</div> <div class="slider-item slick-slide slick-active">a3</div> <div class="slider-item slick-slide slick-active">a4</div> <div class="slider-item slick-slide slick-cloned"></div> <div class="slider-item slick-slide slick-cloned"></div> </div> </div> </div> </section>