Html中点击按钮图片动态移动

最新推荐文章于 2021-06-23 03:54:11 发布

原创最新推荐文章于 2021-06-23 03:54:11 发布 · 2.9k 阅读

4 ·

CC 4.0 BY-SA版权

Html.Jquery 专栏收录该内容

3 篇文章

订阅专栏

博客提及了Body页面的方法，但未给出具体内容。推测围绕Body页面相关方法展开，可能涉及前端开发中页面的操作方法等信息技术内容。

Body页面

<button type="button" id="btn1">按钮</button>
		<button type="button" id="btn2">向左移动</button>
		<div style="width: 100px; height: 100px; background-color: orange; position: absolute; left: 0px;"id="box1"></div>

方法

<script type="text/javascript">
			//注册Onload事件
			window.onload=function(){
				//获取按钮
				var btn1=document.getElementById("btn1");
				//为按钮添加单击事件
				btn1.onclick=function(){
					var box=document.getElementById("box1");
					box.style.left=parseInt(box.style.left)+100+"px";
				}
				
				var btn2=document.getElementById("btn2");
				btn2.onclick=function(){
					var box=document.getElementById("box1");
					box.style.right=parseInt(box.style.right)+100+"px";
				
				}
				
				
						}
		</script>