运动总结

最新推荐文章于 2025-04-12 14:28:52 发布

LW0512

最新推荐文章于 2025-04-12 14:28:52 发布

阅读量139

点赞数

分类专栏：运动文章标签：前端

本文链接：https://blog.youkuaiyun.com/LW0512/article/details/108911822

版权

运动专栏收录该内容

1 篇文章

订阅专栏

获取css的属性样式的兼容写法

function getstyle(DOM,name){
		if(DOM.currentStyle){ IE的兼容
			return DOM.currentStyle[name];  
		}else{其他浏览器的兼容
			return getComputedStyle(DOM,false)[name];
		}
	}
window.getComputedStyle(Element,false)['width']

获取元素宽高属性的总结:

offsetWidth 	既能获取元素的宽高,还能获取元素的边框的宽高
clientWidth 	只能获取元素的宽高,不能获取元素的边框的宽高
op.style.width	只能获取带行内样式元素的宽高,内联样式元素的宽高获取不到,并且获取的值 带有px单位

多个小球移动效果图
在这里插入图片描述

具体代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 100px;
				height: 100px;
				background: red;
				border-radius:50% ;
				position: absolute;
			}
			#box1{
				width: 100px;
				height: 100px;
				background: red;
				border-radius:50% ;
				position: absolute;
				top:150px;
			}
		</style>
	</head>
	<body>
		<button onclick="btn()">开始</button>
		<div id="box"></div>
		<div id="box1"></div>
	</body>
	<script type="text/javascript">
		//对案例中重复的代码进行封装
		var odiv=document.getElementById('box');
		var odiv1=document.getElementById('box1');
		var timer;
		var timer1;
		function btn(){	
			clearInterval(timer);//解决小球加速问题
			timer=setInterval(function(){
				if(odiv.offsetLeft>=1500){
					clearInterval(timer);
				}else{
					odiv.style.left=odiv.offsetLeft+10+'px';
				}
					
				},50)
			clearInterval(timer1);//解决小球加速问题
			timer1=setInterval(function(){
				if(odiv1.offsetLeft>=1500){
					clearInterval(timer1);
				}else{
					odiv1.style.left=odiv1.offsetLeft+10+'px';
				}
				},50)
		}
	</script>
</html>