使用JavaScript和getElementsByClassName檢索顯示屬性

我試圖創建一個可展開的div。我想要檢索CSS顯示屬性並使用純javascript進行更改。在這樣做時，我收到一個錯誤，說「未捕獲的類型錯誤：未能在'窗口'上執行'getComputedStyle'：參數1的類型不是'元素'。」使用JavaScript和getElementsByClassName檢索顯示屬性

var myFunction = function() { 
 

 
    var header = document.getElementsByClassName('collapse_header'); 
 

 
    var hiddenDiv = document.getElementsByClassName('collapse_body'); 
 
    var theCSSprop = window.getComputedStyle(hiddenDiv).getPropertyValue('display'); 
 
    for (var i = 0; i < hiddenDiv.length; i++) {  
 

 
     if (theCSSprop.style.display === "block" || theCSSprop.style.display === "") { 
 
      clVal[i].style.display = "none"; 
 

 
     } else { 
 
      theCSSprop.style.display = "block"; 
 
     } 
 

 

 
     header[i].addEventListener('click', myFunction, false); 
 

 
    } 
 

 
} 
 
document.addEventListener('DOMContentLoaded', myFunction, false);

.collapse_wrapper { 
 
    width:500px; 
 
    padding:0; 
 
    overflow:hidden; 
 
    border:1px solid #636428; 
 
    border-radius:18px; 
 
    margin:auto; 
 
    margin-top:50px; 
 
    margin-left:50px; 
 
    float:left; 
 
} 
 

 
.collapse_header { 
 
    padding:50px; 
 
    width:100%; 
 
    background:#636428; 
 
    font-size:34px; 
 
    color:#fff; 
 
    overflow:hidden; 
 
} 
 

 
.collapse_body { 
 
    height:500px; 
 
    background:#fff; 
 
    font-size:90px; 
 
    display:none; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title></title> 
 
</head> 
 

 
<body> 
 
    <section class="collapse_wrapper"> 
 
     <div class="collapse_header"> 
 
      Expandable Div 1 
 
     </div> 
 

 
     <div class="collapse_body"> 
 
      The body of div 1 
 
     </div> 
 
    </section> 
 

 
    <section class="collapse_wrapper"> 
 
     <div class="collapse_header"> 
 
      Expandable Div 2 
 
     </div> 
 

 
     <div class="collapse_body"> 
 
      The body of div 2 
 
     </div> 
 
    </section> 
 
</body> 
 
</html>

來源

2015-04-18 Tomal Smith

getElementsByClassName返回一個數組，因此hiddenDiv是元素的任何數組 –

getElementsByClassName akways返回一個列表。嘗試var hiddenDiv = document.getElementsByClassName（'collapse_body'）[0]但是，如果沒有找到元素，這會拋出。如果您認爲有機會，請在嘗試獲取其CSS之前檢查結果。 –

我嘗試過，但不起作用。當我點擊class爲「collapse_header」的div時，我希望body部分與該div關聯，而不是一次全部關聯。此外，我有一個事件處理程序附加到每個頭。 header [i] .addEventListener（'click'，myFunction，false）; –

我爲你想達到什麼工作的例子。如果您不使用庫，以跨瀏覽器方式獲取計算屬性在後面會有點痛苦。所以，我認爲在javascript中設置display:none可能會更好。

這裏是我的代碼

for (var i = document.getElementsByClassName('collapse_body').length - 1; i >= 0; i--) { 
    document.getElementsByClassName('collapse_body')[i].style.display = "none"; 
}; 
var l = document.getElementsByClassName('collapse_header'); 
var toggle = function() 
{ 
    cb = this.parentNode.getElementsByClassName('collapse_body')[0]; 
    cb.style.display = ((cb.style.display == "none") ? "block" : "none"); 

} 
for (var i = l.length - 1; i >= 0; i--) { 
    l[i].addEventListener('click', toggle, false); 
};

基本上你所有的collapse_body元素的display屬性設置爲none，然後附加到每collapse_header該切換自己的手足collapse_body的顯示屬性的事件。

Here is a working example

同時請注意，getElementsByClassName()返回元素，它可以映射或選擇，你會與一個正常的數組做一個元素的數組。

來源

2015-04-18 20:06:52

謝謝，它完美的作品。唯一讓我困惑的是這行：for（var i = l.length - 1; i> = 0; i--）。爲什麼向下增加？ –

在這種情況下，它並不是真的必要，但有時在操縱dom時會阻止一些錯誤。 [檢查這裏]（http://stackoverflow.com/questions/12411561/removeclass-function-doesnt-work-properly） –

使用JavaScript和getElementsByClassName檢索顯示屬性

回答

相關問題