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

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

javascript html

如何在javascript中更改图像的坐标？,javascript,html,Javascript,Html,嘿，我想更改图像位置（x，y）或（上/左）我不确定有什么不同。。我可以得到图像的当前坐标，但是我不能更改它我试着做： var ball = document.getElementById("ball"); ball.x = 50; 但这并没有改变它以下是完整的代码： <html onmousemove="showCoords(event)"> <head> </head> <body> <img id='ball' src="

嘿，我想更改图像位置（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>



函数showCoords（事件）
{
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=“鼠标：X坐标：”+X+”，Y坐标：“+Y+”球：X坐标：“+ballX+”，Y坐标：“+ballY；
document.getElementById（“demo”）.innerHTML=鼠标；
if（x<100）//它确实输入了这个语句
{
ball.getBoundingClientRect（）.x+=500；//什么也不做
}
}

我想这可能与图像的位置有关，但我无法使其工作。

我想您正在寻找类似的内容：

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

具有严格的只读属性：“…具有只读

左

、

上

、

右

、

下

、

宽度

和

高度

以像素为单位描述整个边框框的属性”。要重新定位元素，您需要使用CSS属性，例如

top

、

left

或

translate

。您可能应该考虑更改图像的style.left和style.top值，以创建运动错觉。