JavaScript——控制div的移动

最新推荐文章于 2023-04-12 17:20:24 发布

原创最新推荐文章于 2023-04-12 17:20:24 发布 · 707 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

这篇博客通过HTML和JavaScript实现了一个交互式的div元素，当点击上、下、左、右四个按钮时，div会相应地在页面上移动。示例中，div初始位置为left: 100px, top: 100px，并有一个绿色边框。每个按钮的点击事件绑定了调整div位置的函数，通过改变style属性的left和top值，实现了div的平移效果。" 111324103,10295146,LeetCode抽奖概率算法解析及腾讯面试编程题,"['算法', '编程题', '面试准备', 'LeetCode', '腾讯']

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button>上</button>
<button>下</button>
<button>左</button>
<button>右</button>
<div id="div" style="position: absolute;left: 100px;top: 100px;border: 1px solid green">
<img src="abc.png">
</div>
<script>
var div = document.getElementById("div");
var btn = document.getElementsByTagName("button");
btn[0].onclick = function () {
div.style.top = parseInt(div.style.top) - 10 + "px";
}
btn[1].onclick = function () {
div.style.top = parseInt(div.style.top) + 10 + "px";
}
btn[2].onclick = function () {
div.style.left = parseInt(div.style.left) - 10 + "px";
}
btn[3].onclick = function () {
div.style.left = parseInt(div.style.left) + 10 + "px";
}
</script>
</body>
</html>