使用JavaScript修改CSS属性，而不重新放置旧属性

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

例如，如果我只应用水平移动（因此我只使用offsetX），它将起作用。但当我应用垂直移动时，它将不再有效。我使用“transform”CSS属性，我知道问题在哪里，但我不知道如何解决它。这是因为我应用了一个新属性来垂直移动，但随后删除了允许水平移动元素的旧属性

那么您知道如何将多个CSS属性（相同）添加到一个元素中吗？ 我试着用“+”或在同一个``中加上它们，但没有用

我希望我已经说清楚了，对不起我的英语：）

提前感谢您的帮助：）

我的代码：

let-box=document.querySelector（'.box'）；
设x=document.querySelector（'#x'）；
设y=document.querySelector（'#y'）；
让区域=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{
宽度：1000px；
高度：400px；
保证金：自动；
边框：3个红色虚线；
}
.盒子{
宽度：100px；
高度：100px；
边框：3倍纯黑；
}

X:

Y:

变换

属性的值是变换列表。因此，在同一个赋值中同时设置

transformX

和

transformY

let-box=document.querySelector（'.box'）；
设x=document.querySelector（'#x'）；
设y=document.querySelector（'#y'）；
让区域=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{
宽度：1000px；
高度：400px；
保证金：自动；
边框：3个红色虚线；
}
.盒子{
宽度：100px；
高度：100px；
边框：3倍纯黑；
}

X:

Y:

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

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

解决您的问题。
您可以使用水平和垂直参数，而不是单独调用
translateX
/
translateY
调用。问题是，他们知道为什么不起作用，但我删除了旧属性。代码是正确的。你的文章只是重复了他们在问题中已经写下的内容，好像他们不知道为什么它不起作用一样……非常感谢，非常有用！非常感谢，非常有帮助！