我创建了一个按钮,单击它时必须移动到随机位置。 我创建了一个 html 页面,其中有一个按钮 功能。 调用该函数,我创建了两个变量 height 和 width 来生成随机高度和宽度。但是 document.style.top 属性没有按预期工作。请帮助我找到正确的解决方案。 谢谢
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Move Button</title>
</head>
<body>
<script src="Script.js" type="text/Javascript"> </script>
<button id="my-button" onclick= "MoveText()" >Click me</button>
<style>
body {
background-color: rgb(62, 59, 229);
color:yellow;
font-weight: 500;
letter-spacing: 2;
font-size: 35px;
}
</style>
</body>
</html>
Javascript 文件(Script.js):
function MoveText() {
const Button_select=document.getElementById('my-button')
console.log(Button_select)
var height=String(Math.floor(Math.random()*500))+'px'
var width=String(Math.floor(Math.random()*900))+'px'
Button_select.style.top = height;
Button_select.style.left = width;
Button_select.style.color = 'Red'
}
我也尝试过内联Javascript,但没有成功。 我还在样式部分添加了位置属性,并尝试将其设置为绝对和相对,但它不起作用。 我希望单击时该按钮会出现在随机位置。
设置按钮的 CSS 位置。
Button_select.style.position = 'fixed';