使用变量定位图像

Question

我希望能够使用变量来改变图像的位置。

我有以下内容，但它不起作用。请问有谁知道我如何做到这一点？

<img id="myImg" src="https://en.wikipedia.org/static/apple-touch/wikipedia.png"/>

<script>
var x = "100px";
var y = "200px";
</script>

<style>
img {
  width: 800px;
  height: 1030px;
  border: 1px solid black;
  background-:transparent;
  margin-right: 1em;
  object-fit: none;
}
#myImg{
  object-position: x y;
}
</style>

Answer 1

var x = "100px";
var y = "200px";

let img = document.querySelector("#myImg");

img.style.objectPosition = `${x} ${y}`

img {
  width: 800px;
  height: 1030px;
  border: 1px solid black;
  background-:transparent;
  margin-right: 1em;
  object-fit: none;
}
#myImg{
  object-position: x y;
}

<img id="myImg" src="https://en.wikipedia.org/static/apple-touch/wikipedia.png"/>