JavaScript 仅当 div 类存在时才向 div 添加样式

Question

我试图在某些 div 上设置一些内联样式，但只有当 div 和类存在于页面中时才可以

基本上，我有一个 slider ，我想在一些 slider div 上应用标题高度进行调整，但这个 slider 并不存在于每个页面上，所以我希望 JS 仅在页面有 slider 和类

我已经尽力使用下面的代码，但不确定为什么它不起作用，可能是一个愚蠢的错误 :) 这里是新手

var HeaderHeight = document.getElementsByClassName("Header").offsetHeight;
var slideContent = document.getElementsByClassName("slide-container");
var slideSwipes = document.getElementsByClassName("SwiperNav");
if (slideContent.length > 0 || slideSwipes.length > 0) {
  slideContent.style.paddingTop = HeaderHeight + "px";
  slideSwipes.style.top = HeaderHeight + "px";
}

顺便说一句!如果你认为有更好的方法来做一个简单的例子:)

Answer 1

您可以使用 for 循环 迭代元素。slideSwipes 和 slideContent 都是相同的长度

var HeaderHeight = document.getElementsByClassName("Header");
var slideContent = document.getElementsByClassName("slide-container");
var slideSwipes = document.getElementsByClassName("SwiperNav");
if (slideContent.length > 0 || slideSwipes.length > 0) {
  for (var i = 0; i < slideSwipes.length; i++) {
    slideContent[i].style.paddingTop = HeaderHeight[i].offsetHeight + "px";
    slideSwipes[i].style.top = HeaderHeight[i].offsetHeight + "px";
  }
}

工作示例

var HeaderHeight = document.getElementsByClassName("Header");
var slideContent = document.getElementsByClassName("slide-container");
var slideSwipes = document.getElementsByClassName("SwiperNav");
if (slideContent.length > 0 || slideSwipes.length > 0) {
  for (var i = 0; i < slideSwipes.length; i++) {
    slideContent[i].style.paddingTop = HeaderHeight[i].offsetHeight + "px";
    slideSwipes[i].style.top = HeaderHeight[i].offsetHeight + "px";
  }
}

.slide-container{
height:50px;
}
.SwiperNav{
height:10px;
}

<div class="Header">ssx
<div class="slide-container">sxs</div>
<div class="SwiperNav">sxs</div>
</div>
<div class="Header">ssx
<div class="slide-container">sxs</div>
<div class="SwiperNav">sxs</div>
</div>
<div class="Header">ssx
<div class="slide-container">sxs</div>
<div class="SwiperNav">sxs</div>
</div>