Question

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

基本上，我有一个滑块，我想在一些滑块div上应用标题高度进行调整，但是这个滑块并不存在于每个页面上所以我希望JS只在页面有滑块时才能工作和班级

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

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 loop迭代该元素。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>

Answer 2

因为document.getElementsByClassName("slide-container");返回DOM元素的数组而无法正常工作，所以如果你想为第一个元素添加样式，你应该选择这个列表：

var HeaderHeight = document.getElementsByClassName("Header")[0].offsetHeight;
var slideContent = document.getElementsByClassName("slide-container")[0];
var slideSwipes = document.getElementsByClassName("SwiperNav")[0];

您可以使用querySelector代替getElementsByClassName

Answer 3

您可以使用document.body.contains（ELEMENT）检查是否存在DOM元素;在哪里可以使用标签名称或ID或类名来获取ELEMENT ..并在逻辑中使用它

仅当div类存在时，JavaScript才会将样式添加到div

3 个答案: