此问题在此处已有答案：
What do querySelectorAll and getElementsBy* methods return?（12个答案）
四年前关闭了。
我刚开始制作这个页面，为了练习，当我遇到这个错误时，.s1episodes div应该出现在onmouseover命令中，悬停在.season1 div上，但它没有出现，尽管我以前多次这样做过，而且它总是有效。
如您所见，错误消息为：“无法读取undefined的属性'display'”。我还是个初学者，所以我不太清楚这是什么意思。
我已经看到其他问题与此错误消息，但他们没有帮助我不幸的是。
为什么这次不管用？
function showseason1() {
var S1 = document.getElementsByClassName("s1episodes");
S1.style.display = (S1.style.display === 'block' ? 'none' : 'block');
}/* # */
body {
background-color: #38ADAE;
color: #CD295A;
max-width: 1900px;
max-height: 1500px;
}
.menu {
position: fixed;
position: absolute;
left: 13%;
width: 70%;
height: 35%;
background-color: #9B2027;
color: #CC4E13;
}
#logo {
height: 100%;
}
.about {
top: 0%;
width: 10%;
height: 99%;
position: absolute;
left: 5%;
}
.cast {
top: 0%;
width: 10%;
height: 99%;
position: absolute;
left: 20.1%;
}
.season1 {
z-index: 2;
top: 0%;
width: 10%;
height: 99%;
position: absolute;
left: 35.2%;
}
.season2 {
top: 0%;
width: 10%;
height: 99%;
position: absolute;
left: 45.3%;
}
.season3 {
top: 0%;
width: 10%;
height: 99%;
position: absolute;
left: 55.4%;
}
.season4 {
top: 0%;
width: 10%;
height: 99%;
position: absolute;
left: 65.5%;
}
#season1,
#season2,
#season3,
#season4 {
margin-left: -13px;
}
.titles {
font-weight: bold;
font-size: 25px;
position: absolute;
top: 37%;
left: 25%;
}
.s1episodes {
text-align: center;
border-radius: 15px;
display: none;
position: absolute;
width: 70%;
height: 350%;
border: 3px solid red;
bottom: -360%;
left: 3%;
}
h2 {
text-align: center;
}
button {
font-size: 19px;
border: none;
background-color: transparent;
color: #291A14;
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="TFS.css" />
<script src="TFS.js"></script>
</head>
<body>
<div class="menu">
<img id="logo" src="logo.jpg" />
<div class="about">
<span class="titles">About</span>
</div>
<div class="cast">
<span class="titles">Cast</span>
</div>
<div class="season1" onmouseover="showseason1()">
<span id="season1" class="titles">S1</span>
</div>
<div class="s1episodes">
<h2>Episode List</h2>
<button>Episode 1</button>
</div>
<div class="season2">
<span id="season2" class="titles">S2</span>
</div>
<div class="season3">
<span id="season3" class="titles">S3</span>
</div>
<div class="season4">
<span id="season4" class="titles">S4</span>
</div>
</div>
</body>
</html>
2条答案
按热度按时间ycggw6v21#
更改代码以将
[0]用作这是因为
getElementsByClassName提供了具有该类名的元素列表。44u64gxh2#
**
getElementsByClassName**方法返回一个类似数组的元素集合，您应该选择第一个元素，然后调用display：