<head>
<title>4-2多物体运动-获取样式</title>
<style type="text/css">
*
{
margin:0;
padding:0;
}
ul,li
{
list-style:none;
}
ul li
{
width:200px;
height:100px;
background:green;
margin-bottom:20px;
border:2px solid #000;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
<script type="text/javascript">
//设置border之后运动不一致。offset下都有这个bug,只要目标同时设置border width可以直接用getStyle方法来解决
//方法二 :通过设置行内元素 style="width:200px;" css样式删掉 border留着 则obj.style.offsetWidth 则是 200(数值)像素
window.onload = function () {
var aLi = document.getElementsByTagName('li');
for (var i = 0; i < aLi.length; i++) {
aLi[i].timer = null; //多物体运动 给每个li加上各自的定时器
aLi[i].onmouseover = function () {
statMove(this, 400);
}
aLi[i].onmouseout = function () {
statMove(this, 200);
}
}
}
function statMove(obj, iTarget) {
//方式一 :alert(getStyle(obj,'width')); 200px; obj.style.offsetWidth 则是 204px
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var cul=parseInt(getStyle(obj, 'width'));
speed = (iTarget - cul) / 8; //parseInt(getStyle(obj,'width'))转为数字
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
if (cul == iTarget) {
clearInterval(obj.timer);
}
else {
//css样式高 透明度字体大小都可以改变
obj.style.width = cul + speed + 'px'; //obj.style.width 可以写成 obj.style['width']
}
}, 30)
}
//方式三:获取样式 得到的是字符串 200px 宽 border包含在width里面
function getStyle(obj, attr) {
if (obj.currentStyle){
return obj.currentStyle[attr]; //获取样式 支持IE
}
else {
return getComputedStyle(obj, false)[attr];//支持 火狐
}
}
</script>