如何为画布以外的元素translateX和translateY

Question

我想用javascript翻译一个div元素。我尝试了多种方法，如下所列(item是元素):

item = document.getElementById("myDiv");
var x, y
x = y = 20
// doesn't change anything
item.style.translate = "translate(" + x + "px," + y + "px)";
// only works on canvas
try {
item.translate(x, y);
} catch (e) {
console.log(e)
}

<div id=myDiv>Text...</div>

如何移动div而不诉诸CSS(我想对多个元素这样做，不同)?

Answer 1

• 添加var关键字到item
• 分离x和y赋值
• 用transform代替translate
• 删除translate:()后的冒号:

注意:在代码

中添加分号;

var item = document.getElementById("myDiv");
var x, y;
x = 60; y = 60;
item.style.transform = `translate(${x}px, ${y}px)`;

<div id=myDiv>Text...</div>

要使用相同的功能，创建一个function并传递:

// item, 50, 60 === el, x, y
addSpace(item, 50, 60);

var item = document.getElementById("myDiv");
const addSpace = (el, x, y) => {
return el.style.transform = `translate(${x}px, ${y}px)`;
};
addSpace(item, 60, 60);

<div id="myDiv">Text</div>