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

以你之姓@ 2023-06-22 05:19 7阅读 0赞

## 获取元素样式的方法： ##

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>

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS设置CSS样式的方法。

![1ddf613920181db178972859d3c46600.jpeg][] 用JS来动态设置CSS样式，常见的有以下几种 1. 直接设置style的属性某些情况

旧城等待，/ 2024年04月01日 18:25/ 0 赞/ 126 阅读

相关 js运动技术--多物体同时运动

注意：每个物体需要单独使用一个定时器样例1：多个div变宽 <!DOCTYPE html> <html> <head> <me

た入场券/ 2024年02月17日 23:17/ 0 赞/ 76 阅读

相关 js运动技术--缓冲运动

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

￡神魔★判官ぃ/ 2024年02月17日 23:11/ 0 赞/ 74 阅读

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

获取元素样式的方法： ps:element表示待求解样式的DOM元素对象 1.element.style //获取行内（内联）样式表对象

以你之姓@/ 2023年06月22日 05:19/ 0 赞/ 8 阅读

相关 JS_js获取元素样式style属性值，js获取元素css样式，getComputedStyle

getComputedStyle(“元素”, “伪类”) <div id="caseroul" style="width: 500px;"></div> 获取单个

小灰灰/ 2022年10月15日 08:57/ 0 赞/ 276 阅读

相关 42、JavaScript的运动----多个物体同时运动

1、多个物体同时运动 ---例子：多个Div，鼠标移入变宽单定时器，存在问题每个Div一个定时器 2、多物体运动框架定

ゞ浴缸里的玫瑰/ 2022年09月21日 14:26/ 0 赞/ 289 阅读

相关 JS运动之多物体框架--多个div变宽

如果只为div添加一个定时器的话，在多个div变宽的时候会发生问题，但是如果为每个div添加一个定时器，那么就可以实现多个物体变宽。注意：在多物体运动的情况下，所有东西不能共用

ゝ一纸荒年。/ 2022年08月05日 02:23/ 0 赞/ 233 阅读

相关 Javascript运动概念2——多物体运动框架

1、多个物体同时运动例子：多个div，鼠标移入变宽 Bug——单定时器，存在问题解决办法：将每个div一个定时器 2、多物体运动运动框架（1）

古城微笑少年丶/ 2022年07月15日 12:08/ 0 赞/ 209 阅读

相关多物体链式运动，多值同时运动

实现函数 / 多物体链式运动，多值同时运动 / function startMove(obj, json, callback){

梦里梦外;/ 2022年05月22日 09:00/ 0 赞/ 229 阅读

相关 javascript 动画效果（多物体缓冲运动,多物体透明度变化，匀速移入移出、链式运动、同时运动）

多物体缓冲运动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

- 日理万妓/ 2021年11月05日 05:00/ 0 赞/ 295 阅读