Question

我在HTML中添加了三张图片，并更改了它们的位置（顶部和左侧）。但是，我想将其检索到我的JavaScript中，以便可以使用它。

<!doctype html>
<html>
<head>
<title>Pong</title>
<meta charset="UTF-8">

<link rel="stylesheet" type="text/css" href="CSS/mystyles.css">

</head>
<body>
<div id ="divGameBoard" class = "ex1">
    <img id = "imgBall" src="Media/Ball.png" >
    <img id = "imgRight" src="Media/RightPaddle.png" >
    <img id = "imgLeft" src="Media/LeftPaddle.png" >
</div>

<script src="JS/code.js"></script>
</body>
</html>

这是我的html

var imgBall = document.getElementById("imgBall");
var imgRight = document.getElementById("imgRight");
var imgLeft = document.getElementById("imgLeft");

var ballPosisjonTop = imgBall.style.left;
var ballPosisjonLeft = imgBall.style.left;

console.log(ballPosisjonTop)

我的CSS

#divGameBoard {
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -160px;
width: 320px;
height: 200px;
background-color: lightblue;
}


#imgBall {
position: fixed;
top: 50%;
left: 50%;
margin-top: -7.5px;
margin-left: -7.5px;
}

#imgRight {
position: fixed;
top: 50%;
left: 50%;
margin-top: -29px;
margin-left: 149px;
}

#imgLeft {
position: fixed;
top: 50%;
left: 50%;
margin-top: -29px;
margin-left: -160px;
}

所以您可以在这里看到，我尝试使用style.left方法，但是它不起作用。我发现这是最高的保证：我已经完成了50％的保证金和最高和最低保证金。所以我想知道还有其他方法可以使用吗？

Answer 1

使用getBoundingClientRect()方法。

imgBall.getBoundingClientRect().left

如何通过使用Javascript而不是CSS来检索元素（图像）的位置？

1 个答案: