获取元素样式的方法:
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>