Question

我有这个代码（在www.dtwdev.co.uk/errors/index.html上运行）

基本上如下：

<script>
function slideUpClose(el) {
    var panel = document.getElementsByClassName(el);
    panel.style.transition = "top 0.5s ease-out 0s";    
    panel.style.top = "-1000px";    
}
</script>

带有一点造型

<style>
    #selection {background:#f1f1f1; width:600px; height:300px;}
</style>

和HTML：

<div id="selection" class="slideUp">Content heading
    <div>
        <button class="close_button" id="close_this_content_panel" onclick="slideUpClose('slideUp')">Click to close</button>
        <p>Some content goes here</p>
    </div>
</div>

我正在寻找的是当单击按钮时，内容面板应向上滑动并离开窗口。我已经设法使用document.getElementById，但是在使它适用于类名时遇到了麻烦。非常感谢任何建议！

Answer 1

基本上document.getElementsByClassName会返回nodeList。

var panel = document.getElementsByClassName(el);
Array.from(panel).forEach(function(elm){
 elm.style.transition = "top 0.5s ease-out 0s";    
 elm.style.top = "-1000px"; 
});

您必须遍历每个元素以设置其style / attribute。使用Array.from(nodeList)将nodeList转换为原生array对象。然后使用其forEach函数迭代每个元素。

如果您的环境不支持ES6，请使用以下代码

var panel = document.getElementsByClassName(el);
for(var i=0,len=panel.length;i<len;i++){
  panel[i].style.transition = "top 0.5s ease-out 0s";    
  panel[i].style.top = "-1000px"; 
}

Answer 2

document.getElementsByClassName返回一个htmlCollection，而不是一个元素。你可以循环元素来操纵所有元素

function slideUpClose(el) {
    var panels = document.getElementsByClassName(el);
    Array.prototype.forEach.call(panels, function(panel) {
        panel.style.transition = "top 0.5s ease-out 0s";    
        panel.style.top = "-1000px";    
    }    
}

document.getElementsByClassName不像getElementById那样工作

2 个答案: