-1
У меня возникли проблемы с Javascript этого кода, я хочу изменить размер изображения, изменив его ширину при нажатии на меню (добавив имя класса «im2» в тег img с именем класса «im»). но часть меню отлично работает, изображение не будет перемещаться ... Я думаю, что пропустил ошибку, или я делаю это неправильно, может кто-нибудь помочь, я новичок в 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 ("им")' будет возвращать массив как коллекцию. И почему вы отметили его jQuery – Satpal
['classList' также не возвращает строку] (https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) ... –
И будьте осторожны что коллекция, возвращаемая 'getElementsByClassName', является ** live **, поэтому, если вы измените список классов элемента таким образом, чтобы его добавляли в эту коллекцию или удаляли из нее, это происходит сразу, что может быть сложно, если вы зацикливание. Вместо этого обратите внимание на 'querySelectorAll', который возвращает моментальный снимок или, если только * удаляет * элементы из коллекции, изменяя свой класс, вы можете просто выполнить цикл с конца вперед. –