点击按钮无移动效果求助：按钮点击后无法随机定位

核心问题原因 #

按钮默认是static定位，这种定位模式下top、left等偏移属性不会生效，必须将按钮的定位设置为absolute、fixed或relative才能让偏移属性起作用。

修正后的代码 #

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>
    <style>
        body {
            background-color: rgb(62, 59, 229);
            color: yellow;
            font-weight: 500;
            letter-spacing: 2px;
            font-size: 35px;
            margin: 0;
        }
        #my-button {
            position: absolute;
        }
    </style>
</head>
<body>
    <button id="my-button" onclick="MoveText()">Click me</button>
    <script src="Script.js" type="text/Javascript"></script>
</body>
</html>

JavaScript代码（Script.js） #

function MoveText() {    
    const Button_select = document.getElementById('my-button')
    
    // 获取视口可用宽高，避免按钮超出屏幕
    const viewportWidth = window.innerWidth - Button_select.offsetWidth;
    const viewportHeight = window.innerHeight - Button_select.offsetHeight;

    // 生成在视口范围内的随机坐标
    const topPos = Math.floor(Math.random() * viewportHeight) + 'px';
    const leftPos = Math.floor(Math.random() * viewportWidth) + 'px';

    Button_select.style.top = topPos;
    Button_select.style.left = leftPos;
    Button_select.style.color = 'Red';
}

额外优化说明 #

• 给body添加margin:0，消除默认边距，保证按钮移动范围准确
• 修正了原CSS中letter-spacing:2的单位遗漏问题，改为letter-spacing:2px
• 计算随机坐标时减去按钮自身的宽高，避免按钮移出视口无法点击

内容的提问来源于stack exchange，提问作者Abishek B