使用 JavaScript 修改 CSS 属性而不替换旧的

Question

我正在尝试创建一个根据鼠标坐标移动的 HTML 元素。我正在使用“mousemove”事件并移动我的元素，我使用了 offsetX/Y 事件的属性。

例如，如果我只应用水平移动（所以我只使用 offsetX），它会起作用。但是当我应用垂直移动时，它不再起作用了。我使用'transform' CSS 属性，我知道问题出在哪里，但我不知道如何解决它。这是因为我应用了一个新属性来垂直移动，然后我删除了让元素水平移动的旧属性。

那么您知道如何将多个 CSS 属性（相同）添加到一个元素吗？ 我试图将它们与“+”一起添加或在同一个``中，但它不起作用。

我希望我已经清楚了，对不起我的英语:)

提前感谢您的帮助:)

我的代码：

let box = document.querySelector('.box');
let x = document.querySelector('#x');
let y = document.querySelector('#y');
let area = document.querySelector('.area');

area.addEventListener('mousemove', (e) => {
  x.innerHTML = e.offsetX;
  y.innerHTML = e.offsetY;
  box.style.transform = `translateX(${e.offsetX}px)`;
  box.style.transform = `translateY(${e.offsetY}px)`;
});

.area {
  width: 1000px;
  height: 400px;
  margin: auto;
  border: 3px dashed red;
}

.box {
  width: 100px;
  height: 100px;
  border: 3px solid black;
}

<div class="area">
  <div class="box"></div>
  <p>X : <span id="x"></span></p>
  <p>Y : <span id="y"></span></p>
</div>

Answer 1

transform 属性的值是一个转换列表。所以将transformX 和transformY 设置在同一个作业中。

let box = document.querySelector('.box');
let x = document.querySelector('#x');
let y = document.querySelector('#y');
let area = document.querySelector('.area');

area.addEventListener('mousemove', (e) => {
  x.innerHTML = e.offsetX;
  y.innerHTML = e.offsetY;
  box.style.transform = `translateX(${e.offsetX}px) translateY(${e.offsetY}px)`;
});

.area {
  width: 1000px;
  height: 400px;
  margin: auto;
  border: 3px dashed red;
}

.box {
  width: 100px;
  height: 100px;
  border: 3px solid black;
}

<div class="area">
  <div class="box"></div>
  <p>X : <span id="x"></span></p>
  <p>Y : <span id="y"></span></p>
</div>

Answer 2

它不起作用，因为您覆盖了 translateX 样式。

box.style.transform = `translate(${e.offsetX}px, ${e.offsetY}px)`;

解决你的问题。