兼容代码:
//获取元素的任意属性值
//ele是要获取的元素,attr为要获取的属性
function getStyle(ele,attr){
return window.getComputedStyle?window.getComputedStyle(ele,null)[attr]:getCurrentStyle[attr];
}
利用这个js的案例:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#dv {
width: 200px;
height: 100px;
background-color: green;
position: absolute;
top: 20px;
}
</style>
</head>
<body>
<input type="button" value="变宽400px" id="btn1" />
<input type="button" value="向下移动800px" id="btn2" />
<div id="dv"></div>
<script src="js/common.js"></script>
<script src="js/getStyle.js"></script>
<script>
my$('btn1').onclick=function(){
move(my$('dv'),'width',400,10);
};
my$('btn2').onclick=function(){
console.log(getStyle(this,'height'));
console.log(getStyle(my$('dv'),'top'));
move(my$('dv'),'top',800,10);
};
function move(ele,attr,aim,step){
//每次点击执行函数的时候都清除定时器,防止连续点击加快移动速度
//之所以用ele.time是为了不出time undefined的错误
clearInterval(ele.time);
ele.time=setInterval(function() {
//获取当前属性值,是带单位的,parseInt()获得纯数字
var now =parseInt(getStyle(ele,attr));
//确定每次移动的单位距离step的正负,如果目标距离aim大于当前距离,step为正,反之step为负
//每次执行函数之前将step初始化为正值
step = Math.abs(step);
step = now < aim ? step : -step;
//设置每次执行函数当前得位置都在变化,变化量为step
now += step;
//设置元素的位置,如果正在向目标位置移动,那么Math.abs(now-aim)>Math.abs(step),如果已经在目标位置的地方
//但是不能精确则Math.abs(now-aim)<Math.abs(step),这两种情况的当前位置是不一样的
if (Math.abs(now - aim) > Math.abs(step)) {
ele.style[attr] = now+'px';
} else if (Math.abs(now - aim) < Math.abs(step)) {
clearInterval(time);
ele.style[attr] = aim+'px';
}
else if(Math.abs(now - aim) === Math.abs(step)){
ele.style[attr] = aim+'px';
}
},20);
}
</script>
</body>
</html>
通过传入不同的attr,对div进行不同的改变。