Question

我正在跟踪W3Schools的this tutorial，以了解如何使用HTML，CSS和Javascript构建幻灯片。在我正在开发的网站上，我希望最初隐藏底部的缩略图和侧面的箭头，直到用户按下按钮为止。

为此，我在CSS文件中设置了visibility: hidden;。类dot（底部的缩略图）的CSS代码如下：

.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    visibility: hidden;
    transition: background-color 0.6s ease;  
}

在按钮的Javascript操作中，我将“点”类下文档元素的可见性设置为visible，如下所示：

document.getElementsByClassName("dot").style.visibility="visible";

我已经验证了通过alert（）视图按下按钮时是否触发了此操作。在执行此命令之前，每一行代码似乎都按预期运行。另外，底部的缩略图（“点”元素）不会出现，因此它们的可见性也不会达到预期的效果。

关于这可能是什么或如何解决的任何想法？非常感谢您的帮助！

Answer 1

此document.getElementsByClassName("dot")返回一个数组，您不能将style属性应用于该数组。

我将为您提供一些有关如何解决或重新考虑此问题的想法。

1）遍历数组并将样式应用于每个元素

var elements = document.getElementsByClassName("dot")
for(var i = 0; i < elements.length; i++) {
    elements[i].style.visibility = "visible";
}

2）为每个班级分配一个ID，然后调用document.getElementById("someID")

<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>

document.getElementyById("one").style.visibility = "visible";
document.getElementyById("two").style.visibility = "hidden";
document.getElementyById("three").style.visibility = "hidden";

Answer 2

document.getElementsByClassName()将返回一个数组。

如果只有一个元素，则可以使用数组中的第一个索引：

document.getElementsByClassName("dot")[0].style.visibility="visible";

否则，如果您有多个：

var dot = document.getElementsByClassName("dot")
for(var i = 0; i < dot.length; i++) {
    dot[i].style.visibility = "visible";
}

切换可见性不起作用（HTML / CSS / Javascript）

2 个答案: