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
Post a Comment