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

小曼啊～

于 2020-12-26 20:11:33 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Html.Jquery

本文链接：https://blog.youkuaiyun.com/Net_CreateGuo/article/details/111768600

Html.Jquery 专栏收录该内容

3 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>