如何按类名获取元素以更改具有平滑过渡的类？

时间：2016-12-28 12:15:22

标签： javascript jquery html css getelementsbyclassname

我在使用此代码的Javascript时遇到问题，我想通过在单击菜单时更改其宽度来调整图像大小（通过添加classname＆＃34; im2＆＃34; img标记为classname＆＃34; IM＆＃34）。但菜单部分工作正常，图像不会移动......我想我错过了一个错误，或者我做错了，任何人都可以帮忙，我是javascript的新手...... !!

＆＃13;
＆＃13; 
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";
    }
}
＆＃13; 
*{
  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;
  
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

您必须使用数组索引，使用它如下：

document.getElementsByClassName("im")[0]

答案 1 :(得分：0)

您无法使用 getElementsByClassName 直接将样式应用于组元素，您需要将其存储到数组中并逐个访问。

＆＃13;
＆＃13; 
function changefu() {
  var k = document.getElementsByClassName("im");
  for(i=0;i < k.length; i++){ 
    if (document.getElementById("sidenav").classList == "menu" && k[i].className == "im") {
        document.getElementById("sidenav").classList.toggle("menu2");
        k[i].className = "im im2";
    } else {
        document.getElementById("sidenav").className = "menu";
k[i].className = "im";
        
    }
    }
}
＆＃13; 
*{
  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;
  
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

由于getElementsByClassName返回一个节点列表，玩具不能使用.className。

您可以在此处使用querySelector来获取图像。它会给第一个满足选择器的元素。

https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector 

function changefu() {
  
    document.getElementById("sidenav").classList.toggle("menu2");
    if (document.querySelector(".im2") == null) {
        document.querySelector(".im").className = "im im2";
    } 
    else
    {  
        document.querySelector(".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>

相关问题
最新问题