Question

嘿，我想更改图像位置（x，y）或（顶部/左侧），我不确定有什么区别。.我能够获取图像的当前坐标，但是无法更改..

我尝试做：

var ball = document.getElementById("ball");

ball.x = 50;

但是它并没有改变。

这是完整的代码：

<html onmousemove="showCoords(event)">
<head>
</head>
<body>
    <img id='ball' src="ball.png" alt="Logo"style="margin-left: 50%;
    margin-right: auto; margin-top: 25%;width:70px;height:70px;">
    <p id="demo"></p>
    <script>
        function showCoords(event) 
        {
            var x = event.clientX;
            var y = event.clientY;
            var ball = document.getElementById("ball");
            var ballX = ball.getBoundingClientRect().x;
            var ballY = ball.getBoundingClientRect().y;
            var mouse = "mouse: X coords: " + x + ", Y coords: " + y + ' Ball: X coords: ' + ballX + ', Y coords: ' + ballY;
            document.getElementById("demo").innerHTML = mouse;
            if(x < 100) // it does enter this statement
            {
                ball.getBoundingClientRect().x += 500; // not doing anything
            }

        }
    </script>
</body>

我以为它可能与图像的位置有关，但是我无法使其正常工作。

Answer 1

我认为您正在寻找这样的东西：

function move(){
    let ball = document.getElementById('ball')
    let ballX = ball.getBoundingClientRect().x
    ball.style.position = 'absolute'
    ball.style.top =  ballX + 500
 }

如何在javascript中更改图像的坐标？

1 个答案: