javascript - how to use document.getElementsByClassName("classname") with style.animation -


getelementbyid works since ids have unique , function returns 1 element (or null if none found). got struck class name. how can add style.animation class name ?

function myfunction() {    document.getelementsbyclassname("mydiv").style.webkitanimation = "mynewmove 4s 2";     document.getelementsbyclassname("mydiv").style.animation = "mynewmove 4s 2";  }
.mydiv {    width: 100px;    height: 100px;    background: red;    position: relative;    -webkit-animation: mymove 1s infinite;    /* chrome, safari, opera */    animation: mymove 1s infinite;  }      @-webkit-keyframes mymove {    {      left: 0px;    }    {      left: 200px;    }  }      @-webkit-keyframes mynewmove {    {      top: 0px;    }    {      top: 200px;    }  }  @keyframes mymove {    {      left: 0px;    }    {      left: 200px;    }  }  @keyframes mynewmove {    {      top: 0px;    }    {      top: 200px;    }  }
<button onclick="myfunction()">try it</button>        <div class="mydiv"></div>

getelementsbyclassname returns htmlcollection, therefore, either need access specific items([0]) or iterate on them

function myfunction() {    document.getelementsbyclassname("mydiv")[0].style.webkitanimation = "mynewmove 4s 2";     document.getelementsbyclassname("mydiv")[0].style.animation = "mynewmove 4s 2";  }
.mydiv {    width: 100px;    height: 100px;    background: red;    position: relative;    -webkit-animation: mymove 1s infinite;    /* chrome, safari, opera */    animation: mymove 1s infinite;  }      @-webkit-keyframes mymove {    {      left: 0px;    }    {      left: 200px;    }  }      @-webkit-keyframes mynewmove {    {      top: 0px;    }    {      top: 200px;    }  }  @keyframes mymove {    {      left: 0px;    }    {      left: 200px;    }  }  @keyframes mynewmove {    {      top: 0px;    }    {      top: 200px;    }  }
<button onclick="myfunction()">try it</button>        <div class="mydiv"></div>


Comments

Popular posts from this blog

c# - Validate object ID from GET to POST -

node.js - Custom Model Validator SailsJS -

php - Find a regex to take part of Email -