< / html >-sharp-sharp-sharp Why didn"t js"s currentStyle work?
related codes
/ / Please paste the code text below (do not replace the code with pictures)
< html lang= "en" >
< head >
<meta charset="UTF-8">
<title>Title</title>
<style>
div{width: 100px;height: 50px;background: yellow;margin: 10px;}
</style>
<script>
window.onload=function () {
var oDiv1 = document.getElementById("div1")
var oDiv2 = document.getElementById("div2")
oDiv1.onmouseover=function () {
startMove(this,"width",400);
}
oDiv1.onmouseout=function () {
startMove(this,"width",200);
}
oDiv2.onmouseover=function () {
startMove(this,"height",200);
}
oDiv2.onmouseout=function () {
startMove(this,"height",50);
}
}
function getStyle(obj,name){
if (obj.currentStyle) {
return obj.currentStyle[name];
}
else {
return getComputedStyle(obj,false)[name];
}
}
function startMove(obj,hh,iTarget) {
clearInterval(obj.timer);
obj.timer=setInterval(function () {
var speed=(iTarget-parseInt(getStyle(obj.hh)))/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if (parseInt(getStyle(obj.hh))==iTarget) {
clearInterval(obj.timer)
}
else {
obj.style[hh]=parseInt(getStyle(obj.hh))+speed+"px";
}
},300)
}
</script> < / head >
< body >
< div id= "div1" > < / div >
< div id= "div2" > < / div >
< / body >
