JavaScript的樣式添加到一個div只有當DIV類存在

我試着去設置一些div一些內嵌樣式，但只有當div和類在頁面存在JavaScript的樣式添加到一個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"; 
}

順便說一句！如果你認爲有更好的方法可以做一個簡單的例子:)

來源

2017-05-18 Nippledisaster

你可以迭代元素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>

來源

2017-05-18 12:50:17 prasanth

請問您可以檢查代碼嗎？我得到這個錯誤未捕獲的SyntaxError：意外的令牌var :)謝謝btw – Nippledisaster

@Nippledisaster。看我更新的答案。我忘了'k' – prasanth

mmm，仍然是相同的錯誤：/ – Nippledisaster

它不工作becouse 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

來源

2017-05-18 12:51:57

可以檢查用於使用document.body.contains（ELEMENT）的DOM元素的存在;在那裏你可以使用標籤名稱或ID或類名獲得ELEMENT ...並將其應用於您的邏輯內

來源

2017-05-18 12:56:28

JavaScript的樣式添加到一個div只有當DIV類存在

回答

相關問題