javascript - 使用javascript动态更改html元素的位置

Question

我正在尝试使用 JavaScript 更改 html 元素的像素位置。我的函数应该接受用户输入的位置并根据数组更改像素坐标。

此函数应在用户输入的位置创建一个按钮，但没有任何反应。我认为问题在于设置一个样式属性，该属性需要文本字符串和存储位置字符串的变量。任何帮助将不胜感激。

var arr = [
  ["A1", "left:81px;"],
  ["A2", "left:145px;"]
]

function moveObject(arr) {
  var location = prompt("Enter location", "A1");
  var i;
  for (let i = 0; i < arr.length; i++) {
    if (arr[i][0] === location) {
      destination = arr[i][1] + ";";
    }
  }
  var box = document.createElement("button");
  box.setAttribute("style", "position: absolute;");
  box.setAttribute("style", destination)
  box.innerText = location; 
  document.body.appendChild(box);
}
moveObject(arr)

Answer 1

组合 css 值字符串，并且仅调用 setAtrribute('style') 一次。

第二个调用消除了第一个调用

当数组中的值已存在时，您还要添加额外的 ;。

注意我没有添加任何验证来验证用户输入的值是否存在于数组中。在样式中添加未定义值之前，您需要自己执行此操作

var arr = [
  ["A1", "left:81px;"],
  ["A2", "left:145px;"]
]

function moveObject(arr) {
  var location = prompt("Enter location", "A1");
  var i;
  for (let i = 0; i < arr.length; i++) {
    if (arr[i][0] === location) {
      destination = arr[i][1] ;
    }
  }
  var box = document.createElement("button");
  // combine style values
  box.setAttribute("style", "position: absolute;" + destination);
 
  box.innerText = location; 
  document.body.appendChild(box);
}
moveObject(arr)