-1
我遇到了這段代碼的Javascript問題，我想通過改變它的寬度來改變它的寬度，當點擊菜單時（通過將classname「im2」添加到帶有類名「im」的img標籤）來調整圖像大小。但菜單部分工作正常，圖像不會移動...我想我錯過了一個錯誤，或者我做錯了，任何人都可以請幫助，我是新的JavaScript ...！如何按類名獲取元素以平滑過渡更改類？
function changefu() {
if (document.getElementById("sidenav").classList == "menu" && document.getElementsByClassName("im").className == "im") {
document.getElementById("sidenav").classList.toggle("menu2");
document.getElementsByClassName("im").className = "im im2";
} else {
document.getElementById("sidenav").className = "menu";
document.getElementsByClassName("im").className = "im";
}
}*{
margin:0;
padding:0;
}
body{
display:block;
overflow-x:hidden;
}
.large{
display:inline-block;
height:100%;
width:100%;
transition-duration: 1s;
transition-property: all;
}
//.large2{
display:inline-block;
height:100%;
width:94.7%;
}
.menu{
float:left;
z-index:11111;
width:200px;
height:100%;
text-align:center;
display:block;
position:fixed;
border-right: 2px solid gray;
background:white;
transition-duration: 1s;
transition-property: all;
transform: translateX(-202px) translateY(0px) translateZ(0px);
}
.menu2{
transform: translateX(0px) translateY(0px) translateZ(0px);
}
ul{
margin:0;
list-style:none;
}
li{
padding:10px;
font-family:arial;
font-weight:bold;
font-size:18px
}
.bgimg{
float:left;
//max-width:1900px;
position:relative;
width:100%;
top:122px;
}
#logop{float:left;}
.im{
width:100%;
float:right;
display:block;
z-index:99;
transition-duration: 1s;
transition-property: all;
}
.im2{
width:89.5%;
}
.topnav{
heigth:100px;
position:fixed;
border-bottom: 2px solid gray;
width:100%;
background-color:white;
z-index:99991 !important;
}
.topnav img{
height:80px;
width:50px;
padding-left:25px;
padding-top:20px;
padding-bottom:20px;
padding-right:25px;
display:block;
}
.menubtn{
font-size:30px; font-family:arial; display:block; padding-left:100px;
padding-top:60px;
width:120px;
}<body>
<div class="topnav">
<img id="logop" src="http://logolagoon.com/wp-content/uploads/2013/11/Puppy-Logo.png" alt="logo">
<div class="menubtn" onclick="changefu()"><a style="text-decoration:none; color:black;" href="javascript:void(0);">☰ Menu</a></div>
</div>
<div id="large" class="large">
<div id="sidenav" class="menu">
<ul>
<li style="padding-top:300px;"><a style="text-decoration:none; color:black; z-index:1002;" href="#">Home</a></li>
<li><a style="text-decoration:none; color:black;" href="#">Cats</a></li>
<li><a style="text-decoration:none; color:black;" href="#">Dogs</a></li>
<li><a style="text-decoration:none; color:black;" href="#">Monkey</a></li>
</ul>
</div>
<div id="bgimg" class="bgimg">
<img class="im" src="https://unsplash.it/1600/900/?random" alt="random">
<img class="im" src="https://unsplash.it/1600/900/?random" alt="random">
<img class="im" src="https://unsplash.it/1600/900/?random" alt="random">
<img class="im" src="https://unsplash.it/1600/900/?random" alt="random">
<img class="im" src="https://unsplash.it/1600/900/?random" alt="random">
</div>
</div>
</body>
'document.getElementsByClassName（ 「IM」）'將返回喜歡收集陣列。爲什麼你標記它jQuery – Satpal
['classList'也不返回一個字符串]（https://developer.mozilla.org/en-US/docs/Web/API/Element/classList）... –
並提防'getElementsByClassName'返回的集合是** live **，所以如果你改變一個元素的類列表，使它被添加到集合中或從集合中刪除，那麼馬上就會發生，如果你循環。考慮'querySelectorAll'，它會返回一個快照，或者如果只是通過改變它們的類來從集合中移除*元素，那麼你可以從最後向前循環。 –