HTML and CSS Reference
In-Depth Information
Set the left and top
to 200 and the color
to a light blue.
The element ani-
mates over 10 sec-
onds as before.
The animation is
complete.
Set the left to 0, the
top to 300, and the
color to black.
The element ani-
mates from its cur-
rent position.
After 10 seconds, the
new properties are
in effect.
<menu>
<button onclick="clickme()">Click Me</button>
<button onclick="reset()">Reset</button>
<label for="myleft">left</label>:
<input id="myleft" type="number" value="100">
<label for="mytop">top</label>:
<input id="mytop" type="number" value="100">
<label for="mycolor">color</label>:
<input id="mycolor" type="color" value="#666666">
</menu>
<div id="animateme">Animate Me</div>
function clickme() {
var el = document.getElementById('animateme');
var left = document.getElementById('myleft').value;
var top = document.getElementById('mytop').value;
var color = document.getElementById('mycolor').value;
el.setAttribute("style","left: " + left + "px; top: " + top +
"px; background-color: " + color + ";");
}
