切换可见性不起作用(HTML/CSS/Javascript)
切换可见性不起作用(HTML/CSS/Javascript)
提问于 2018-07-24 08:15:23
我正在关注来自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操作中，我将"dot“类下文档元素的可见性设置为可见，如下所示：
document.getElementsByClassName("dot").style.visibility="visible";我已经验证了当通过alert()视图按下按钮时，会触发此操作。在执行此命令之前，每一行代码似乎都按预期运行。此外，底部的缩略图(“点”元素)不会出现，因此它们的可见性不会像预期的那样可见。
你知道为什么会这样吗，或者我该怎么解决它？非常感谢你的帮助！
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-24 08:24:07
此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";Stack Overflow用户
发布于 2018-07-24 08:30:08
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";
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51488774
复制相关文章
相似问题
腾讯云开发者
