如何在不依赖CSS的情况下，使用JavaScript对Div等非Canvas元素执行translateX和translateY操作

首先，先帮你理清现有代码的问题：

1. 只定义x = y = 20但没关联到元素属性，当然不会有任何效果；
2. item.style.translate = "translate(...)"写法错误——CSS的translate属性值不需要套translate()括号，正确格式应该是"20px 20px"，而且这个属性对div是有效的，你之前觉得只在Canvas生效是因为写法不对；
3. 调用item.translate(x, y)会报错，因为DOM元素根本没有这个方法，这个方法是给Canvas绘图上下文用的，不是给HTML元素用的。

然后你提到“不依赖CSS”实现平移——其实严格来说，DOM元素的位置控制本质上都要通过CSS属性来实现，但你应该是指不想用静态的样式表，而是完全用JavaScript动态控制？那下面两种方法都能满足你的需求，而且可以给不同元素设置不同的平移值：

方法一：使用transform属性（推荐） #

这是性能最优的方式，因为transform不会影响文档流，浏览器可以用GPU加速渲染。直接通过JS动态设置元素的transform样式即可：

const item = document.getElementById("myDiv");
const x = 20;
const y = 20;
// 模板字符串写法更简洁
item.style.transform = `translate(${x}px, ${y}px)`;

// 如果要给多个元素设置不同平移，比如遍历元素数组：
const elements = document.querySelectorAll(".target-div");
elements.forEach((el, index) => {
  // 每个元素用不同的x、y值
  el.style.transform = `translate(${10 * index}px, ${15 * index}px)`;
});

方法二：使用position + left/top #

如果你的元素需要脱离文档流或者依赖传统定位方式，可以先设置元素的position为relative/absolute/fixed（默认是static，left/top对静态元素无效），再修改left和top值：

const item = document.getElementById("myDiv");
// 先设置定位方式
item.style.position = "relative";
const x = 20;
const y = 20;
item.style.left = `${x}px`;
item.style.top = `${y}px`;

// 多元素示例：
const elements = document.querySelectorAll(".target-div");
elements.forEach((el, index) => {
  el.style.position = "absolute";
  el.style.left = `${50 + 30 * index}px`;
  el.style.top = `${50 + 20 * index}px`;
});

另外补充一下：你之前尝试的style.translate其实是CSS的新属性（transform的简写），正确用法是item.style.translate = ${x}px ${y}px``，这个也能生效，不过兼容性不如transform: translate(...)好，所以更推荐用transform属性。

内容的提问来源于stack exchange，提问作者Infigon