如何使用javascript让html元素移动到任意位置？
如何使用javascript让html元素移动到任意位置？
提问于 2019-03-10 16:54:52
我尝试使用以下代码：
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
position: absolute;
background-color: coral;
color: white;
}
</style>
</head>
<body>
<p>Click the "Try it" button to position the DIV element 100 pixels from
the
right edge:</p>
<p><strong>Note:</strong> If the position property is set to "static", the
right
property has no effect.</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
<h1>myDIV</h1>
</div>
<script>
function myFunction() {
document.getElementById("myDIV").style.right = Math.floor(Math.random()
* 1)
+ 100.px ;
}
</script>
</body>
</html>但是它仍然不能工作！不过，我没怎么尝试过。
回答 4
Stack Overflow用户
发布于 2019-03-10 17:09:03
一个基本的解决方案
这会将div放置到视口中任意位置(x/y)的任意位置。我添加了一个transition来让事情变得更流畅一些。
const btn = document.querySelector("button");
const height = document.documentElement.clientHeight;
const width = document.documentElement.clientWidth;
const box = document.getElementById("myDIV");
btn.addEventListener("click", () => {
let randY = Math.floor((Math.random() * height) + 1);
let randX = Math.floor((Math.random() * width) + 1);
box.style.top = randY + "px";
box.style.right = randX + "px";
});#myDIV {
--div-width: 100px;
position: absolute;
background-color: coral;
color: white;
transition: .5s top, .5s right;
top: 0;
right: calc(100% - var(--div-width));
width: var(--div-width);
}
button {
z-index: 1;
position: absolute;
}<button>Try it</button>
<div id="myDIV">
<h1>myDIV</h1>
</div>
更好的解决方案
动画top和left/right的性能不是很好，应该用transform代替。使用transform来移动东西会激活硬件加速。该系统将使用其GPU来制作动画，这将与本机应用程序的性能一样流畅。如果你正在制作一个你已经提到的游戏，你会想让它像移动环境中的应用程序一样。
const btn = document.querySelector("button");
const height = document.documentElement.clientHeight;
const width = document.documentElement.clientWidth;
const box = document.getElementById("myDIV");
btn.addEventListener("click", () => {
let randY = Math.floor((Math.random() * height) + 1);
let randX = Math.floor((Math.random() * width) + 1);
box.style.transform = `translate(${randX}px, ${randY}px)`;
});#myDIV {
--div-width: 100px;
position: absolute;
background-color: coral;
color: white;
transition: 0.5s transform;
top: 0;
width: var(--div-width);
}
button {
z-index: 1;
position: absolute;
}<button>Try it</button>
<div id="myDIV">
<h1>myDIV</h1>
</div>
Stack Overflow用户
发布于 2019-03-10 17:00:47
您的代码几乎是正确的。只需要在JS中做一些小小的更改。看看我的解决方案。希望这能有所帮助！
function myFunction() {
document.getElementById("myDIV").style.right = Math.random() * window.innerWidth + 'px';
}#myDIV {
position: absolute;
background-color: coral;
color: white;
}<p>Click the "Try it" button to position the DIV element a random amount of
pixels from the
right edge:</p>
<p><strong>Note:</strong> If the position property is set to "static", the
right property has no effect.</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
<h1>myDIV</h1>
</div>
Stack Overflow用户
发布于 2019-03-10 17:04:29
<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
position: absolute;
background-color: coral;
color: white;
}
</style>
</head>
<body>
<p>Click the "Try it" button to position the DIV element a random amount of
pixels from the
right edge:</p>
<p><strong>Note:</strong> If the position property is set to "static", the
right property has no effect.</p>
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
<h1>myDIV</h1>
</div>
<script>
function myFunction() {
document.getElementById("myDIV").style.right = Math.floor(Math.random()*(1000-0+1)+0)+"px"; ;
}
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55086016
复制相关文章
相似问题
腾讯云开发者
