多物体多目标的缓冲运动及js设置获取元素css样式的方法

本文链接：https://blog.csdn.net/csdn_zy_com/article/details/103536428

获取元素样式的方法：


ps:element表示待求解样式的DOM元素对象

1.element.style  //获取行内（内联）样式表对象
2.window.getComputedStyle(element,null)//IE9以下能兼容，第二个参数获得伪类元素的样式
3.element.currentStyle()

设置元素CSS样式的方法：

element.style.attrName = attrValue

多物体多目标的缓冲运动

实现一个事件对多个物体，多个属性的改变

<style type="text/css">
   div{
   	width: 100px;
   	height: 100px;
   	background-color: red;
   	opacity: 1;
   	position: absolute;
   	left: 0;
   }
   .div{
   	top:200px;
   }
   .div2{
	top:30px;
   }
</style>
<body>
	<div class="div"></div>
	<div class="div2"></div>
	<script type="text/javascript">
	var  div = document.getElementsByTagName('div')[0];
	var div2 = document.getElementsByTagName('div')[1];
	var timer;
	//封装获取样式的方法
				   //（元素节点，样式属性，伪类）
	function getStyle(elem,prop,weilei){
	//判断是否有伪类没有赋值为空，有则正常赋值
		var weilei = welei == 'undefind' ? null ：weilei;
		if(window.getComputedStyle){
			return window.getComputedStyle(elem)[prop]
		}else{
			return elem.currentStyle[prop];
		}
	}
			//（元素节点，属性对象）
	function move(ele,attrObj,callback){
	//用定时器前先清理定时器
		clearInterval(ele,timer);
		var ispeed = null,//存放每次运动的步长
		icur = null;//元素本身的样式
		ele.timer = setInterval(function(){
		 //开关
			var istop = true;
			//遍历属性对象
			for(var attr in attrObj){
			   //判断属性是否为透明度
				if(attr == 'opacity'){
					icur = parseFloat(getStyle(ele,attr))*100;
				}else{
					icur = parseFloat(getStyle(ele,attr));
				}
					//每步走的长度	=（目标值-起始值）/分成7段
				ispeed = (attrObj[attr]-icur)/7;
												//正方向运动：反方向
				ispeed = ispeed > 0 ? Math.ceil(ispeed) : Math.floor(ispeed);
				//正方向最后一段1px一运动所以向上取整 ，反方向最后要变为0所以向下取整
				if(attr == 'opacity'){
					ele.style.opacity = (icur + ispeed)/100; 
				}else{
					ele.style[attr] = icur + ispeed+"px";
				}
				//判断是否达到目标值
				if(icur != attrObj[attr]){
					istop = false;
				}
			}
			//达到时清楚定时器
			if(istop){
				clearInterval(ele.timer)
			}
		},200)
	}
	div.onclick = function(){
		move(div,{width:300,height:300,left:200,top:300,opacity:50})
		move(div2,{width:300,height:300,left:200,top:300,opacity:50})
	}
	</script>
</body>